> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Kbd

Shows a keyboard shortcut as a `<kbd>` cap. It is display-only — the DS binds nothing, so the `keydown` handler stays yours — and `Code` is the one to reach for when what you are showing is a value rather than a key. One cap holds one key and `KbdGroup` sets out a combination; render the modifier symbols (⌘, ⇧, ⌥, ↵) rather than the words, so the same shortcut reads the same everywhere.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Kbd) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/primitives-kbd--overview)

```tsx
import { Kbd } from '@wallarm-org/design-system/Kbd';

export const Basic = () => <Kbd>⌘</Kbd>;
```

## Usage

```tsx
import { Kbd } from '@wallarm-org/design-system/Kbd';
```

## Examples

### Group

`KbdGroup` lays a combination out one cap per key: modifiers on their own above, and a two-key chord below where the `+` is plain text between the caps.

```tsx
import { Kbd, KbdGroup } from '@wallarm-org/design-system/Kbd';
import { VStack } from '@wallarm-org/design-system/Stack';
import { Text } from '@wallarm-org/design-system/Text';

export const Group = () => (
  <VStack>
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>⇧</Kbd>
      <Kbd>⌥</Kbd>
      <Kbd>⌃</Kbd>
    </KbdGroup>

    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <Text>+</Text>
      <Kbd>B</Kbd>
    </KbdGroup>
  </VStack>
);
```

### Sizes

`small` beside `medium`. Match the cap to the density of the text around it rather than to what looks best on its own.

```tsx
import { Kbd } from '@wallarm-org/design-system/Kbd';
import { HStack } from '@wallarm-org/design-system/Stack';

export const Sizes = () => (
  <HStack>
    <Kbd size='small'>⌘</Kbd>
    <Kbd size='medium'>⌘</Kbd>
  </HStack>
);
```

### With tooltip

Inside a `Tooltip` the cap restyles itself for the inverted surface, so a shortcut hint needs nothing special from you.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { Info } from '@wallarm-org/design-system/icons';
import { Kbd } from '@wallarm-org/design-system/Kbd';
import { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';

export const WithTooltip = () => (
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant='outline' color='neutral'>
        <Info />
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      Add instance <Kbd>⌘</Kbd>
    </TooltipContent>
  </Tooltip>
);
```

## Props

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| size           | `{ xsmall: string; small: string; medium: string; }` | `small` |             |
| data-testid    | `string \| undefined`                                |         |             |