KBD
Displays keyboard keys and shortcut combinations in a styled <kbd> element.
Single key
Enter
vue
<KBD>Enter</KBD>Key combination
Pass the keys prop with an array of key names to render a joined shortcut.
CtrlKCmdShiftPAltF4
vue
<KBD :keys="['Ctrl', 'K']" />
<KBD :keys="['Cmd', 'Shift', 'P']" />
<KBD :keys="['Alt', 'F4']" />Inline in text
KBD renders inline so it can be embedded naturally in prose.
Press Ctrl + C to copy, then Ctrl + V to paste. Or use CtrlZ to undo your last change.
vue
<p>
Press <KBD>Ctrl</KBD> + <KBD>C</KBD> to copy, then <KBD>Ctrl</KBD> + <KBD>V</KBD> to paste.
Or use <KBD :keys="['Ctrl', 'Z']" /> to undo your last change.
</p>Common shortcuts
Search CmdK
Save CmdS
Close Esc
Submit Enter
vue
<KBD :keys="['Cmd', 'K']" />
<KBD :keys="['Cmd', 'S']" />
<KBD>Esc</KBD>
<KBD>Enter</KBD>Props
| Prop | Type | Default | Description |
|---|---|---|---|
keys | string[] | undefined | Array of key names to display as a shortcut combination |
Slots
| Slot | Description |
|---|---|
default | Key label for single-key usage (ignored when keys prop is provided) |