# 键盘按键 · JGuang UI

> 以键帽样式展示快捷键和组合键。

- 页面: https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/kbd
- 改编自: shadcn/ui 文档 (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c
- 说明：正文保留英文原文。

> 示例 `kbd-demo`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/kbd


## Installation


  

**Command**


  

**Manual**


```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```


### Copy and paste the following code into your project.


[View complete source: components/ui/kbd.tsx](/r/jguang-ui/radix/kbd.json)


### Update the import paths to match your project setup.


## Usage

```tsx
import { Kbd } from "@/components/ui/kbd"
```

```tsx
<Kbd>Ctrl</Kbd>
```

## Composition

Use the following composition to build `Kbd` and `KbdGroup`:

```text
Kbd
KbdGroup
├── Kbd
└── Kbd
```

## Group

Use the `KbdGroup` component to group keyboard keys together.


> 示例 `kbd-group`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/kbd


## Button

Use the `Kbd` component inside a `Button` component to display a keyboard key inside a button.


> 示例 `kbd-button`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/kbd


## Tooltip

You can use the `Kbd` component inside a `Tooltip` component to display a tooltip with a keyboard key.


> 示例 `kbd-tooltip`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/kbd


## Input Group

You can use the `Kbd` component inside a `InputGroupAddon` component to display a keyboard key inside an input group.


> 示例 `kbd-input-group`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/kbd


## RTL

To enable RTL support in JGuang UI, see the [RTL configuration guide](/systems/jguang-ui/docs/rtl).


> 示例 `kbd-rtl`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/kbd


## API Reference

### Kbd

Use the `Kbd` component to display a keyboard key.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | ``      |

```tsx
<Kbd>Ctrl</Kbd>
```

### KbdGroup

Use the `KbdGroup` component to group `Kbd` components together.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | ``      |

```tsx
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>
```

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt