Kbd
kbd按键 · <kbd> 等宽皮肤 + 组合键并排 + RSC
用法
单键
包裹单个按键名，渲染为带边框的键帽样式。
Esc
tsx
<Kbd>Esc</Kbd>组合键
组合键靠并排多个 Kbd 拼出，中间用分隔符连接。
⌘+K
tsx
<span className="inline-flex items-center gap-1">
<Kbd>⌘</Kbd>
<span className="text-muted">+</span>
<Kbd>K</Kbd>
</span>嵌入正文
随文展示快捷键，键帽与文字基线对齐。
按 ⌘ S 保存
tsx
<span className="text-sm text-muted">
按 <Kbd>⌘</Kbd> <Kbd>S</Kbd> 保存
</span>何时用
标注单个键位/快捷键（Esc、⌘、K），等宽键帽皮肤。组合键由多个 Kbd 并排手动组合（见示例）。它是 RSC，可在服务端组件直接用。展示代码片段用 CodeBlock/Snippet。
导入
ts
import { Kbd } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| ...HTMLAttributes | HTMLAttributes<HTMLElement> | — | 透传 <kbd> 原生属性（className、style 等） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 键位内容 |
禁忌 / 坑
- 单个 Kbd 只渲染一个键帽，组合键需自行用多个 Kbd 并排拼装，组件不内置
+分隔。