Kbd
Renders one or more keys as a compact, physical-looking keycap — the canonical way to show shortcuts (⌘K, Ctrl + S) in menus, tooltips, command palettes and docs. Pure display; emits a semantic <kbd> element.
Playground
⌘K
Loading...
Loading syntax highlighting...01 Examples
Single key
Pass a string to keys for one keycap. Symbols like ⌘, ⇧ and ⌥ render as-is.
⌘K
Loading...
Loading syntax highlighting...Multi-key combos
An array joins each entry with the separator (default +). Use it for chorded shortcuts.
Ctrl+K ⌘+⇧+P
Loading...
Loading syntax highlighting...Sizes
Three keycap sizes — sm, md (default) and lg — to match the surrounding text scale.
⌘K sm
⌘K md
⌘K lg
Loading...
Loading syntax highlighting...Inline in a sentence
Kbd sits on the text baseline, so it reads naturally inside running copy or a tooltip.
Press / to search, or ⌘+K for the command palette.
Loading...
Loading syntax highlighting...Named keys
Spelled-out key names work exactly like symbols — useful for keys with no glyph.
Esc Enter Tab
Loading...
Loading syntax highlighting...02 Accessibility
- Renders a semantic
<kbd>element, the native HTML tag for keyboard input. It is presentational, so no explicitroleis added. - Every key is visible text, so screen readers read the shortcut exactly as it is shown.
- The
separatordrawn between keys carriesaria-hidden="true"— assistive tech reads the keys, not the connective+. Kbdis a hint, not a control — it never receives focus and has no interactive behaviour of its own. Wire the actual shortcut on the element it describes.
03 API Reference
10 props
No matching properties |
No matching properties
04 Installation
Import
Loading...
Loading syntax highlighting...