Skip to the page
Tactile UI Kit

Kbd

The key to press, drawn as the key: a small cap on a skirt with a dish worked into its top. Shortcuts come as combos and follow the platform, so ⌘ K on a Mac is Ctrl K elsewhere.

Press keys on your own keyboard: a cap sinks while its key is down. Try ⌘ or Ctrl, Shift, K, Esc, Enter and Space.

  • A <kbd> is text, not a control: it is not focusable and it does nothing. To press something, use a key.
  • A symbol cap is hidden from assistive technology and its name is spoken instead, so ⌘ is read “Command” and ⇧ “Shift”, not by their code points.
  • The cap is 22px tall at its default size and the label inside is 11px semibold in the second ink, so it stays legible in both finishes.
  • Where a shortcut differs by platform, the visitor sees their own; do not print the Mac symbols to everyone.
  • The pressed state is a second cue, never the only one: it changes with a real key press and is not needed to use a page.
Tactile UI Kit
Get the Founder Pass