Kbd

<Kbd>⌘</Kbd> is one key cap. <Kbd keys={['Ctrl', 'C']} /> is a chord: an outer <kbd> holding one styled <kbd> per key, the HTML idiom for a key combination.

import Kbd from '@zuilib/components/kbd'

Single key

Each cap is a bordered mono chip on --muted with the soft shadow. --foreground (not --muted-foreground) keeps the 12px text above 4.5:1 in both themes.

Loading example

Chords

keys renders one cap per entry inside a kbd-group root, joined by separator (default +). A non-empty keys wins over children.

Loading example

Separator

The separator is real text, exposed to assistive tech, so the chord reads as it looks: Ctrl+Shift+P, not CtrlShiftP. Use then for sequences.

Loading example

Inline

Caps sit on the text baseline, so a shortcut can live inside a sentence or a menu row.

Loading example

Props

KbdProps extends HTMLAttributes<HTMLElement> (minus children) with:

Prop	Type	Default	Description
keys	string[]	—	One cap per entry inside an outer <kbd>; a non-empty array takes precedence over children
separator	ReactNode	'+'	Drawn between the keys and read by assistive tech
children	ReactNode	—	A single key; ignored when a non-empty keys is given
className	string	—	Merged last onto the root (the cap, or the group when keys is given)

Slots

Slot	Element	Notes
[data-slot="kbd"]	kbd	One key cap; the root for a single key
[data-slot="kbd-group"]	kbd	The root when keys is given
[data-slot="kbd-separator"]	span	Between two caps

Tokens

Token	Used for
--muted, --foreground	Cap fill and text
--border	Cap border
--muted-foreground	Separator
--radius-sm	Cap corners (from --radius)
--font-mono, --text-xs	Cap type
--shadow-soft	Cap shadow

Accessibility

• Renders real <kbd> elements; a chord is an outer <kbd> of inner <kbd>s, which screen readers announce as keyboard input.
• The separator is plain text, not aria-hidden, so Ctrl+Shift+P is read with its joins.
• Kbd only shows a shortcut. Bind the key yourself and add aria-keyshortcuts to the control it belongs to.

Related

• Menu: Menu.Item shortcut accepts a <Kbd> for the chip look.
• Code: inline and block code on the same mono type.