# Kbd

> Displays a keyboard key or shortcut with spoken labels for symbols.

Category: Typography · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/kbd

Kbd shows a single key, or a shortcut given as `keys`. Modifier names such as mod, shift and alt render as symbols, and each symbol also carries a text label, so screen readers say “Command plus K” rather than reading the glyph.

## Import

```tsx
import { Kbd } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Shortcut

```tsx
import { Kbd } from '@bindshq/stance-react';

export function Basic() {
  return <Kbd keys={['mod', 'k']} />;
}
```

### Single keys

```tsx
import { Kbd } from '@bindshq/stance-react';

export function Single() {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <Kbd>Esc</Kbd>
      <Kbd keys={['enter']} />
      <Kbd keys={['shift', 'tab']} />
      <Kbd keys={['up']} size="sm" />
      <Kbd keys={['down']} size="sm" />
    </div>
  );
}
```

### In running text

```tsx
import { Kbd, Stack, Text } from '@bindshq/stance-react';

export function InText() {
  return (
    <Stack gap={2}>
      <Text size="sm">
        Press <Kbd keys={['mod', 'k']} size="sm" /> to search templates.
      </Text>
      <Text size="sm">
        Press <Kbd size="sm">Esc</Kbd> to close the dialog.
      </Text>
    </Stack>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Kbd | `keys` | `string[]` | None | Keys of a combination, e.g. ["mod", "k"]. |
| Kbd | `size` | `'sm' \| 'md'` | `'md'` | Key size. |
| Kbd | `children` | `ReactNode` | None | A single key when keys is omitted. |

## Accessibility

- Uses nested <kbd> elements, the HTML idiom for key combinations.
- Symbols are aria-hidden and paired with visually hidden names.

## Guidelines

**Do**

- Show the platform-appropriate modifier.

**Don’t**

- Use Kbd for non-keyboard input.

## Related

- https://stanceui.com/components/code
- https://stanceui.com/components/command-palette