COMPONENT

Key

A keystroke, drawn as the cap you press. It goes on a <kbd> and nowhere else, because the element is what makes a screen reader announce it as input rather than as a stray capital letter.

In a sentence

Caps sit on the baseline of the text around them, so a paragraph keeps its rhythm.

Press Enter to open it, Escape to close it, and Tab to walk the options. Undo is CtrlZ everywhere except a Mac, where it is ⌘Z.

HTML

<div class="prose">
  <p>
    Press <kbd class="key">Enter</kbd> to open it, <kbd class="key">Escape</kbd> to
    close it, and <kbd class="key">Tab</kbd> to walk the options. Undo is
    <span class="key-combo"><kbd class="key">Ctrl</kbd><kbd class="key">Z</kbd></span>
    everywhere except a Mac, where it is
    <span class="key-combo"><kbd class="key">⌘</kbd><kbd class="key">Z</kbd></span>.
  </p>
</div>

One letter, or a word

Same component throughout. The width is a minimum and the padding does the rest, so Z stays square and Escape simply grows.

A Z Space Escape ⌘ ↵

HTML

<div class="chip-row">
  <kbd class="key">A</kbd>
  <kbd class="key">Z</kbd>
  <kbd class="key">Space</kbd>
  <kbd class="key">Escape</kbd>
  <kbd class="key">⌘</kbd>
  <kbd class="key">↵</kbd>
</div>

Reference

Read from components/key.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.key.key-combo

READS--ds-font-display--ds-gap-tight--ds-hairline--ds-ink--ds-key-min--ds-pad-key--ds-radius-control--ds-raised--ds-rule-strong--ds-text-key--ds-track-subtle

Notes

IT IS NOT A BUTTON, AND IT MUST NEVER BECOME ONE

Nothing here is focusable, nothing hovers, and there is no pressed state. This labels a key on your reader's keyboard; it does not offer one on the screen. A cap somebody can click is a control lying about where the input comes from — if you want a thing to press, that is a button.

WHY IT EXISTS AT ALL

This book had written the same thing forty-four times in running prose — "press Enter", "close it with Escape", "Tab into one". A reference that documents keyboard behaviour in a sentence makes you hunt for it. Extract on the second copy; this was the forty-fourth.

A SYMBOL IS YOUR RISK, NOT THE LIBRARY'S

This library ships no fonts, so a cap reading ⌘ is only as reliable as the face you brought. All four symbols above draw in this reference's own face — checked by rasterising each one and comparing it against a private-use codepoint, because the widths tell you nothing: in a monospaced face a missing glyph is exactly as wide as an A. In someone else's face they may be boxes. Spell it out — Cmd — wherever you do not know.

THE EDGE IS A SHADOW, NOT A SECOND BORDER

A thicker bottom border would change the box's height and knock the cap off the baseline it is sitting on. A shadow paints outside the box and moves nothing. line-height: 1 matters for the same reason — inherited, a cap in a paragraph grows as tall as the paragraph's line box and stops looking like a key at all.