Kbd 键盘按键
展示键盘快捷键与按键组合
用法
import { Kbd } from "@heroui/react";组件结构
import { Kbd } from "@heroui/react";
export default () => (
<Kbd>
<Kbd.Abbr title="Command">⌘</Kbd.Abbr>
<Kbd.Content>K</Kbd.Content>
</Kbd>
);示例
变体
导航按键
行内用法
说明文字
特殊按键
自定义样式
Tailwind CSS
全局 CSS
可使用 @layer components 指令自定义 Kbd 组件类。
了解更多。
@layer components {
.kbd {
@apply bg-gray-100 dark:bg-gray-800 border-gray-300;
}
.kbd__abbr {
@apply font-bold;
}
.kbd__content {
@apply text-sm;
}
}样式参考
HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。
CSS 类
Kbd 组件使用以下 CSS 类（查看源码样式）：
基础类
.kbd- 基础按键样式，含背景、边框与间距.kbd__abbr- 修饰键的缩写元素.kbd__content- 按键文本的内容包裹层
API 参考
Kbd
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
children | React.ReactNode | - | 按键内容 |
variant | `"default" | "light"` | default |
className | string | - | 自定义 CSS 类 |
Kbd.Abbr
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
title | string | - | 无障碍 title 属性（如 ⌘ 对应 "Command"） |
children | React.ReactNode | - | 要显示的符号或文本（如 ⌘、⌥、⇧） |
className | string | - | 自定义 CSS 类 |
Kbd.Key
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
children | React.ReactNode | - | 按键文本内容 |
className | string | - | 自定义 CSS 类 |
Kbd.Content Type
keyValue prop 可用的按键值：
| Modifier Keys | Special Keys | Navigation Keys | Function Keys |
|---|---|---|---|
command | enter | up | fn |
shift | delete | down | |
ctrl | escape | left | |
option | tab | right | |
alt | space | pageup | |
win | capslock | pagedown | |
help | home | ||
end |