# Kbd

表示键盘输入或热键。

```jsx
<Kbd>Shift + Tab</Kbd>
```

## [API 参考](#api-参考)

该组件基于 `kbd` 元素，并支持 [常见的边距属性](/themes/docs/overview/layout#margin-props)。

| Prop      | Type                  | Default          |
| --------- | --------------------- | ---------------- |
| `asChild` | `boolean`             | No default value |
| `size`    | `Responsive<enum>`    | No default value |
| `variant` | `"classic" \| "soft"` | `"classic"`      |

## [示例](#示例)

### [尺寸](#尺寸)

使用 `size` 属性来控制文本大小。

```jsx
<Flex direction="column" align="start" gap="3">
  <Kbd size="1">Shift + Tab</Kbd>

  <Kbd size="2">Shift + Tab</Kbd>

  <Kbd size="3">Shift + Tab</Kbd>

  <Kbd size="4">Shift + Tab</Kbd>

  <Kbd size="5">Shift + Tab</Kbd>

  <Kbd size="6">Shift + Tab</Kbd>

  <Kbd size="7">Shift + Tab</Kbd>

  <Kbd size="8">Shift + Tab</Kbd>

  <Kbd size="9">Shift + Tab</Kbd>
</Flex>
```

<!--$-->

<!--/$-->