A keyboard key or shortcut, as text.
Example
import { Kbd, KbdGroup } from "@elements/ui/kbd";
Press <Kbd>Esc</Kbd> to close.
<KbdGroup><Kbd>Ctrl</Kbd>+<Kbd>B</Kbd></KbdGroup>
<KbdGroup keys={["⌘", "K"]} />
<KbdGroup keys={["Ctrl", "Shift", "P"]} separator="+" />
Parts
| Part |
What it is |
Kbd |
<kbd class="kbd">: one keycap. |
KbdGroup |
<kbd class="kbd-group">: a key combination, nested kbd as the HTML spec writes it. |
.kbd-separator |
The text between keys rendered from keys. |
Attributes
Kbd
| Attribute |
Type |
Default |
Description |
class |
string |
"" |
Extra classes on the <kbd>. |
attrs |
Record<string, string | number | boolean | undefined> |
{} |
Other attributes: title names a symbol key. |
KbdGroup
| Attribute |
Type |
Default |
Description |
keys |
string[] |
[] |
Renders a Kbd for each key, after the slot. |
separator |
string |
"" |
Text between the keys from keys, such as "+" or "then". |
class |
string |
"" |
Extra classes on the group. |
attrs |
Record<string, string | number | boolean | undefined> |
{} |
Other attributes for the group. |
Slots
| Slot |
Part |
Content |
default |
Kbd |
The key label: text or an <Icon>. |
default |
KbdGroup |
Kbd parts and the text between them. |
Accessibility
- Native
<kbd>: read as text, never focusable.
- Symbol keys read as their Unicode names. Pass a title, or write the word, where the name matters.
- Inside a button the cap inherits the button's text color, so its contrast follows the button.
See also