Skip to content
EspañolEnglish
All components (244)

Key combination

Typography · KeyCombo

What it is and when to use it

A shortcut painted as keys: "Ctrl" "K" on a PC and "⌘" "K" on a Mac, written once as mod+k.

When to use it

  • Next to a menu action, in a help or in a text that explains a shortcut.
  • keys is the shortcut as in useHotkeys and useShortcut; a sequence is separated by spaces (g i).
  • Without mac, the browser decides; on the server it is painted as on a PC and corrected on reaching the browser.

When not to

  • A single loose key: Kbd.

Keyboard: it has none; it is text.

Accessibility: each key is a <kbd> and the names that change with the language (Shift, Enter, Space) come out translated.

Fine appearance: the keys are those of Kbd.

What it looks like

Save: CtrlS

Search the shop: CtrlShiftK

Always with Mac symbols: ⌘⌥P

<KeyCombo keys="mod+s" />
<KeyCombo keys="mod+shift+k" />
<KeyCombo keys="mod+alt+p" mac />

Props

Import it with import { KeyCombo } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
keysrequiredstringThe shortcut: `mod+k`. A sequence is separated by spaces: `g i`.
classNamestringMerged with the library classes; it does not replace them.
macbooleanPaint it as on a Mac. By default, whatever the browser says; on the server, as on a PC.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: