# Kbd

Shows a keyboard key or shortcut.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Kbd.tsx)

## Overview

Kbd shows a key or shortcut in a native `<kbd>` element. Screen readers read its modifier glyphs by name.

Pass the main key as children and modifiers as props, rather than typing glyphs into children.

## Examples

### Basic

```tsx
import { Kbd } from '@tempoxyz/ds'

export function Demo() {
  return <Kbd>Esc</Kbd>
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Kbd/Basic.tsx)

### Modifiers

Set `ctrl`, `alt`, `shift`, or `meta` to add modifier glyphs before the key, always in that order.

```tsx
import { Kbd, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      <Kbd meta>K</Kbd>
      <Kbd shift>P</Kbd>
      <Kbd alt>Space</Kbd>
      <Kbd ctrl>C</Kbd>
      <Kbd alt meta shift>
        T
      </Kbd>
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '2' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Kbd/Modifiers.tsx)

### Size

Set `size` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { Kbd, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <div key={size} {...styles.row()}>
          <Kbd size={size}>Esc</Kbd>
          <Kbd meta size={size}>
            K
          </Kbd>
        </div>
      ))}
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '2' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Kbd/Size.tsx)

## Guidelines

TODO: Write guidelines for Kbd.