Display
Kbd
A key on a keyboard, set as one.
Usage
import { Kbd } from '@misoto22/design'Notes
A key on a keyboard, set as one.
Renders a <kbd>, which is the element that means this — a <span> styled to look like a key tells a screen reader nothing. Sized in em so it tracks whatever type it sits beside rather than fixing itself at one px value, which is how the same shortcut ended up three different sizes across a page.
Anatomy
| Element | Description |
|---|---|
| Keyrequired | The <kbd>: a --rule-2 hairline on the --radius-sm corner, min-w-[1.6em] so a single character is a cap rather than a sliver, and 0.8em type so the whole cap scales with the copy around it. |
| Legendrequired | children, printed verbatim. One key per element — the space between two of them is a real space in the markup, not a separator the component draws. |
Best practices
Do
- Write one Kbd per key. A whole chord in one box — ⌘K — is a single cap with two glyphs in it, and the min-w-[1.6em] that makes one character square just stretches to hold both.
- Let it take its size from its surroundings: it is set in em, so the same shortcut printed in a heading and in body copy comes out right in both. Pinning it to px is how one shortcut ended up three sizes on one page.
- Give a glyph-only key an aria-label — ⌘, ⌥ and ⇧ are read out as their Unicode names or skipped entirely, so a Mac shortcut written in symbols alone is a silent instruction.
Don’t
- An outline Badge and a Kbd are near enough identical on screen, so the choice between them is entirely about meaning: <kbd> says the reader presses this, and a badge shaped like a key invites a press nothing answers.
- Nothing here binds anything. The element is typography, so a key printed for a shortcut no handler listens for is documentation of a feature the page does not have.
Examples
default
A shortcut inside the sentence that explains it. The space between two caps is a real space in the markup, not something the component draws, and each cap is its own kbd element — which is what tells a screen reader the run is a key rather than a word. Nothing here binds anything, so print a key only where a handler is actually listening for it.
Press ⌘ K to open the palette, or Esc to close it.
one cap per key
A three-key chord, as three caps. One box holding ⌘⇧P is a single key that does not exist, and the min-w-[1.6em] that makes one character square just stretches to hold all three. The glyph keys carry an aria-label because ⌘ and ⇧ are read out as their Unicode names or skipped entirely — a Mac shortcut written in symbols alone is a silent instruction.
Reformat the file with ⌘ ⇧ P.
On Windows and Linux the same chord is Ctrl Shift P.
sized by its copy
The same key, printed at three steps of type. The cap is 0.8em and its padding is in em too, so it takes its size from whatever it sits beside — one component that is right in a heading, in body copy and in a caption. Pinned to a pixel value it is correct in exactly one of them, which is how a single shortcut ended up three sizes on one page.
Press / to search
The same / works from anywhere on the page.
Shortcut: /
Accessibility
- Renders <kbd>, which carries the meaning a styled <span> does not.