kitseed.
组件

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.childrenReactNode必填按键内容
Kbd.classNamestring—附加样式
useModifierKeyLabel()返回 string初始 ⌘客户端识别平台

键盘与约束

Kbd 不可聚焦,不改变 Tab 顺序。为真正的快捷键触发器提供 aria-keyshortcuts,并考虑输入框、中文输入法和浏览器保留快捷键。

避免这样使用

不要把 Kbd 渲染成可点击按钮;不要只显示按键而不说明动作;不要认为显示了快捷键就已经实现对应行为。

来源与版本

0.1.0,来自 Subtic apps/web/components/ui/kbd.tsx。保留平台修饰键的初始渲染策略。

查看由当前源码生成的类型参考

只展示 Kitseed 自身定义的属性,原生 HTML 与 Base UI 透传属性请参阅对应上游说明。

Kbd

属性类型默认值
childrenReactNode—
className?string—

本页内容