Kbd

Kbd — a key cap in running text or beside a hint: ⌘K, Esc, Enter.

Beta · Feedback and status · packages/css/src/components/kbd.css

.pui-kbd · --on-inverse · .pui-kbd-group at space/4. One key per cap.

Kbd — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

• Key is the text property — a symbol (⌘ ⌥ ⇧ ⌃) or a word in sentence case (Esc, Enter, Tab); one key per cap, a shortcut is a row of caps at space/4 (the Kbd group example)
• Tone: light · on-inverse; 20 tall, at least 20 wide, radius/4; 12 Medium
• No states: a cap is never pressed on screen

Use when a shortcut is worth showing — a menu row’s right edge, a toast’s hint (‘Undo ⌘Z’), the Command palette’s rows, a help page.

Do not use when the key is an instruction in prose (write ‘press Enter’); as a button (Button); for a tag or a count (Badge, Chip).

Relates to Toast, Dropdown menu, Command, Tooltip, Badge.

Anti-patterns a cap taller than its line · a whole shortcut in one cap (‘⌘+Shift+K’) · caps on a touch-only screen · a fill changed on the instance.

Keywords: kbd, key, shortcut, keycap, command, hotkey

Figma — page Kbd: Kbd (2 variants)

shadcn: kbd

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens kbd.css.

<kbd class="pui-kbd">⌘K</kbd>   <span class="pui-kbd-group"><kbd class="pui-kbd">⌘</kbd><kbd class="pui-kbd">⇧</kbd><kbd class="pui-kbd">K</kbd></span>

The modifiers

	What it is	Note
Tone	(none) light · --on-inverse	—

Rule — one key per cap; a shortcut is a row of caps at space/4 (.pui-kbd-group).

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
#544d4d on #f2f2f2	7.36	4.5	text.muted on surface.sunken (promised)	ok
#ffffff on #463f3f	10.27	4.5	Nav item when active (promised)	ok

2 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

Nothing in this component takes focus.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).