组件
Kbd 快捷键
为快捷键建立一致、紧凑且具有语义的呈现。
Kbd 使用原生 kbd 元素展示按键。它是操作说明,不会注册快捷键。组合多个 Kbd 表达按键序列,并在按钮或 Tooltip 中补充动作含义。
安装
pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/kbd.json首次使用请先完成 Registry 与主题接入。
组合
<span>
打开搜索 <Kbd>⌘</Kbd> <Kbd>K</Kbd>
</span>useModifierKeyLabel() 在浏览器识别平台后返回常用修饰键标记,初始显示 ⌘,非 Apple 平台更新为 Ctrl。实际键盘监听由应用实现。
Props
| API | 类型 | 默认值 | 说明 |
|---|---|---|---|
Kbd.children | ReactNode | 必填 | 按键内容 |
Kbd.className | string | — | 附加样式 |
useModifierKeyLabel() | 返回 string | 初始 ⌘ | 客户端识别平台 |
键盘与约束
Kbd 不可聚焦,不改变 Tab 顺序。为真正的快捷键触发器提供 aria-keyshortcuts,并考虑输入框、中文输入法和浏览器保留快捷键。
避免这样使用
不要把 Kbd 渲染成可点击按钮;不要只显示按键而不说明动作;不要认为显示了快捷键就已经实现对应行为。
来源与版本
0.1.0,来自 Subtic apps/web/components/ui/kbd.tsx。保留平台修饰键的初始渲染策略。
查看由当前源码生成的类型参考
只展示 Kitseed 自身定义的属性,原生 HTML 与 Base UI 透传属性请参阅对应上游说明。
Kbd
| 属性 | 类型 | 默认值 |
|---|---|---|
children | ReactNode | — |
className? | string | — |