Kbd
A keycap that shows a keyboard shortcut, with the right modifier keys for the person's platform.
Keys
keys takes the keys of a shortcut in order. Modifier tokens become symbols: mod (or meta, cmd) shows ⌘ on Mac and Ctrl elsewhere, alt (or option) shows ⌥ or Alt, shift shows ⇧ and enter shows ↵. Any other token is shown as written. The server always renders the Ctrl and Alt labels, and Mac browsers switch to symbols after hydration.
Without keys, the keycap shows its children.
Variants
light sits on page surfaces and secondary buttons. dark is for primary buttons. disabled dims either variant and sets aria-disabled.
In a button
Put the keycap after the label with ml-1, and match disabled to the button. Add aria-hidden so screen readers don't read the shortcut as part of the button's name.
In a menu
In a Dropdown Menu, pass Dropdown.Shortcut to an item's end. It is a Kbd pinned to the end of the row and takes the same props. Open the menu to see it.
Properties
Key tokens in order, such as ['mod', 'K']. Takes precedence over children
Content to show when keys is not set
Keycap style: light for surfaces and secondary buttons, dark for primary buttons
Default: light
Dims the keycap and sets aria-disabled
Default: false
Additional CSS classes, such as ml-1 for spacing after a label
Other attributes, such as aria-hidden, are passed to the kbd element