Kbd
A key cap for showing keyboard shortcuts in text, menus and tooltips. Renders a semantic <kbd>.
Press Ctrl K to search.
<Text>
Press <Kbd>Ctrl</Kbd> <Kbd>K</Kbd> to search.
</Text>Import
import { Kbd } from "@merid/react";Examples
Sizes
md (default) sits in body text; sm fits inside menu items, tooltips and dense rows.
EscEsc
<Kbd size="sm">Esc</Kbd>
<Kbd size="md">Esc</Kbd>Chords
Render one Kbd per key and put the separator between them as plain text.
Ctrl + Shift + P
<Kbd>Ctrl</Kbd> + <Kbd>Shift</Kbd> + <Kbd>P</Kbd>API reference
Kbd forwards its ref to the <kbd> and passes other HTML attributes through.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "md" | Size of the key cap. |
Styling
| Hook | Values |
|---|---|
.mrd-kbd | Root <kbd> |
data-size | sm · md |
Accessibility
<kbd>is read as its text. Spell out symbols that screen readers pronounce poorly — prefer “Ctrl” over “⌃”, or add a VisuallyHidden name next to the glyph.- Kbd is not interactive; it documents a shortcut, it does not bind one.
Guidelines
Do
Use one cap per key, with the key names your users see on their keyboard.
Avoid
Put a whole shortcut like “Ctrl+Shift+P” inside a single cap.