# Keyboard shortcut

Shows keys to press, on their own or as a combination. Use it in running text, tooltips, and menus that list shortcuts.

```tsx
// demo.tsx
import {KeyboardKey, KeyboardShortcut, Text} from '@earendil-works/elanor-react';

export default function KeyboardShortcutDemo() {
  return (
    <Text>
      Press{' '}
      <KeyboardShortcut>
        <KeyboardKey>Ctrl</KeyboardKey>+<KeyboardKey>K</KeyboardKey>
      </KeyboardShortcut>{' '}
      to search.
    </Text>
  );
}
```

## Usage

```tsx
import {KeyboardKey, KeyboardShortcut} from '@earendil-works/elanor-react';

<KeyboardShortcut>
  <KeyboardKey>Ctrl</KeyboardKey>+<KeyboardKey>K</KeyboardKey>
</KeyboardShortcut>;
```

Both render `kbd`, nested as HTML recommends for key combinations. Write the separator as text between the keys; it shows in `semantic.color.text.secondary`. Keys use `semantic.typography.code.secondary` on `semantic.color.background.surface`, with a thicker bottom border as their depth edge. Pressing a key pushes it in by `semantic.dimension.travel.keyboardKey`, the depth of that edge.

Write key names as text, such as `Shift`, `Ctrl`, and `Esc`. Symbols such as ⌘ and ⇧ are specific to one platform and vary between fonts.

## Single key

Use KeyboardKey on its own for one key. Single characters get square keys.

```tsx
// single-key.tsx
import {KeyboardKey, Text} from '@earendil-works/elanor-react';

export default function KeyboardShortcutSingleKey() {
  return (
    <Text>
      Press <KeyboardKey>Esc</KeyboardKey> to close the dialog, or <KeyboardKey>?</KeyboardKey> for
      all shortcuts.
    </Text>
  );
}
```

## API

### `KeyboardShortcut`

A key combination. Put `KeyboardKey`s inside, with the separator as text, such as `<KeyboardKey>Ctrl</KeyboardKey>+<KeyboardKey>C</KeyboardKey>`.

Renders `<kbd>`. Accepts its HTML attributes and `ref`.

### `KeyboardKey`

A single key, on its own or inside a `KeyboardShortcut`.

Renders `<kbd>`. Accepts its HTML attributes and `ref`.