Prototype Library

Keycap

A keycap for rendering keyboard hints — /, Tab, Esc, ↑ ↓ ↵. Renders a real , token-driven, so it re-skins with the active theme.

Inherited .astro import EsaKbd from '@esa/ecology/esa-kbd.astro';

Preview

/ 
<Kbd>/</Kbd>

Labels

The cap sizes to its content from a 19px square minimum, so single characters stay square and words stretch. No size prop: keycaps sit inline with body or meta text and take their scale from --font-size-100.

/ K Esc Tab Enter ↑ ↓ ↵ 
<Kbd>/</Kbd>
<Kbd>K</Kbd>
<Kbd>Esc</Kbd>
<Kbd>Tab</Kbd>
<Kbd>Enter</Kbd>
<Kbd>↑</Kbd>
<Kbd>↓</Kbd>
<Kbd>↵</Kbd>

Chords

A chord is separate caps with a literal separator between them — not one cap reading Cmd+K. Each cap is a key the user physically presses; the + is prose.

⌘ + K Shift + ? 
<Kbd>⌘</Kbd> + <Kbd>K</Kbd>
<Kbd>Shift</Kbd> + <Kbd>?</Kbd>

In context

Keycaps are hints, not controls — they belong beside the thing the key operates: a search trigger, a menu row, a footer legend in a dialog.

Press / to search.

↑ ↓ navigate ↵ select Esc close 
<p>Press <Kbd>/</Kbd> to search.</p>

<div class="legend">
  <span><Kbd>↑</Kbd><Kbd>↓</Kbd> navigate</span>
  <span><Kbd>↵</Kbd> select</span>
  <span><Kbd>Esc</Kbd> close</span>
</div>

API

No props — the key label is the slot.

SlotTypeDefaultDescription
default slot — The key label — a character, a word (Esc, Tab), or a glyph (↑ ↓ ↵ ⌘).

Accessibility

  • Renders a real <kbd>, so assistive tech announces it as keyboard input rather than as a decorative box.
  • A keycap documents a shortcut — it never provides one. The shortcut must be bound and reachable without it; the cap is not focusable and not a button.
  • Prefer word labels over bare glyphs where a glyph is ambiguous read aloud: Enter announces better than ↵, and ⌘ is announced inconsistently across screen readers.
  • Don't state a platform-specific chord unconditionally — a Windows user reading ⌘ has no such key. Branch on platform, or say "Ctrl/⌘".