Keyboard shortcut

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

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>
  );
}

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.

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

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>
  );
}

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

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

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

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