/// Typography
Kbd
Key cap — a small sunken mono chip for keyboard shortcuts.
import { Kbd } from "@protocore/pds";Basics
Kbd renders a <kbd> element as a small key-cap chip — for naming a single key inline.
Press / to focus the search field.
Combinations
Compose a chord by placing one Kbd per key side by side — ⌘ K, Ctrl Shift R.
Open the command palette with ⌘ K.
Force-refresh the ledger view with Ctrl Shift R.
When to use it
Use Kbd whenever you name a keyboard key or shortcut in text — in help copy, tooltips, command menus, or docs. It renders the raised key-cap that readers recognise instantly as "press this."
For a literal code token (a function, a value, a path) use Code instead — same mono family, but a sunken chip that means "code," not "key." For a chord, render one Kbd per key rather than putting ⌘+K inside a single cap; separate caps read more clearly as physical keys.
Guidelines
Do
- Use one `Kbd` per physical key.
- Compose chords from adjacent caps (`⌘` `K`).
- Use the platform glyph where it's conventional (`⌘`, `⌥`, `⇧`).
- Pair shortcuts with their action in the surrounding text.
Don't
- Don't use `Kbd` for code literals — that is `Code`.
- Don't cram a whole chord into one cap.
- Don't invent shortcuts in docs that the UI doesn't actually bind.
- Don't use it purely decoratively for non-keyboard content.
Accessibility
- Renders a semantic `<kbd>` element, which assistive tech treats as keyboard input.
- Spell out modifier names (or pair the glyph with a word) so a shortcut like `⌘K` is unambiguous when read aloud.
- It is presentational text — the actual key binding must be implemented on the interactive control it describes.
Kbd props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | |
style | CSSProperties | — |