Kbd

基础排版

基于 Bootstrap 5 的按键提示组件，用于展示键盘按键与快捷键组合，支持嵌套组合键、随父元素字号自动缩放，并可渲染为任意元素

Basic usage and examples of the Kbd component

基础用法

要切换目录，请键入 cd 后跟目录名。

要编辑设置，请按 ctrl + ,

打开设置 ctrl + ,

快速查找 ctrl + shift + f

切换终端 ctrl + `

大号文本 enter

常规文本 enter

小号文本 enter

as="span"

Complete API reference for the Kbd component

属性名	类型	默认值	描述
`as`	`ElementType`	`'kbd'`	渲染的根元素类型，可传入 `span`、`code` 等以复用按键样式
`children`	`ReactNode`	-	按键内容
`className`	`string`	-	自定义类名
`...rest`	`HTMLAttributes`	-	根元素的所有原生属性（如 `title`、`aria-label` 等）

按键组件属性接口

export interface KbdProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  children?: ReactNode;
  className?: string;
}