# Kbd

Represents keyboard input or a hotkey.

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

## [API Reference](#api-reference)

This component is based on the `kbd` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

| Prop      | Type               | Default          |
| --------- | ------------------ | ---------------- |
| `asChild` | `boolean`          | No default value |
| `size`    | `Responsive<enum>` | No default value |

## [Examples](#examples)

### [Size](#size)

Use the `size` prop to control text 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>
```