Key cap
A key cap shows a keyboard shortcut inside a button or a menu row, so the shortcut is learned where the action is.
In a button and a row
Show code
<KbButton>Search <KbKbd>⌘</KbKbd><KbKbd>K</KbKbd></KbButton>When to use
- Show the shortcut beside the action it triggers.
- One key per cap. Combine caps for a chord.
- Pair it with aria-keyshortcuts on the control.
- Every shortcut also has a visible control; never rely on the key alone.
E
Import
import { KbKbd } from "@/components/ui/KbButton";
<KbKbd>⌘</KbKbd><KbKbd>K</KbKbd>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
children | ReactNode | None | The key: a letter, symbol or word like Esc. |
Keyboard and screen readers
- Renders a kbd element. Set aria-keyshortcuts on the control so assistive tech hears the shortcut.
- Single-key shortcuts need an off switch (WCAG 2.1.4).
- The cap text has 4.5:1 contrast on its plate.