---
url: /components/basic/FaKbd.md
---
# FaKbd 键盘按键

用于展示键盘按键组合的视觉样式，常用于快捷键提示。

## 使用场景

* 快捷键提示
* 操作指南中的按键说明
* 命令面板的快捷键展示
* 帮助文档中的键盘操作说明

## Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `class` | `HTMLAttributes['class']` | - | 自定义 CSS 类 |

## Slots

| 名称 | 说明 |
|------|------|
| `default` | 按键内容（字符、图标等） |

## 注意事项

### 样式特点

* 小号字体（`text-xs`）
* 中等字重（`font-medium`）
* 圆角背景
* 内边距适当
* 支持 SVG 图标（自动调整尺寸）

1. **配合使用**：组合按键时请使用 `FaKbdGroup` 包裹多个 `FaKbd`
2. **内容长度**：按键内容不宜过长，适合单个字符或简短单词
3. **图标支持**：可以使用 `FaIcon` 组件显示图标，图标会自动调整为合适尺寸

## FaKbdGroup 键盘组合

用于包裹多个 `FaKbd` 组件，展示组合按键的容器组件。

## 使用场景

* 快捷键组合展示
* 键盘操作说明
* 命令面板提示
* 帮助文档中的多键组合说明

## Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `class` | `HTMLAttributes['class']` | - | 自定义 CSS 类 |

## Slots

| 名称 | 说明 |
|------|------|
| `default` | 包含的 `FaKbd` 组件 |

## 注意事项

1. **仅用于组合**：此组件仅用于包裹多个 `FaKbd`，不建议单独使用
2. **间距自动**：内部的 `FaKbd` 会自动添加适当间距
3. **灵活内容**：除了 `FaKbd` 外，也可以放入其他内容（如分隔符）