FMX Prototype Pipeline

Keyboard

Keycaps for documenting shortcuts — a single key or a chord (caps joined by +). default (muted) and inverse (dark) variants.

K

<Keyboard keys="K" />

CtrlB

<Keyboard keys={["Ctrl", "B"]} />

⌘K

<Keyboard keys={["⌘", "K"]} inverse />

Toggle menu CtrlB

<span className="inline-flex items-center gap-xs">
  Toggle menu <Keyboard keys={["Ctrl", "B"]} />
</span>

Props

keys:string | string[]

One key (single cap) or a chord (a cap per key, joined by +).

inverse:boolean= false

Dark cap with light text (for use on light surfaces).

Tokens