React 组件

UGKbd 键盘按键

用于快捷键、组合键和键盘操作提示，保留原生 kbd 语义。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx
import { UGKbd } from '@ug666/ui-react'

组合键

每个键独立使用 UGKbd，连接符由业务文案控制。

Ctrl + K 搜索⌘ + Enter 发送

尺寸展示

EscShiftEnter

代码示例

tsx
<p className="flex items-center gap-2">
  按 <UGKbd>Ctrl</UGKbd> + <UGKbd>K</UGKbd> 搜索
</p>

属性

属性类型默认值说明
size'sm' | 'md' | 'lg''md'设置键帽的高度、最小宽度和字号。
childrenReactNode—按键名称或符号。
classNamestring—用于业务布局扩展。