Kbd
Readable keyboard shortcuts that do not look like clickable actions.
Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add kbdDependencies
What add kbd installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils
Examples
3 examples · 1 componentShortcuts
Symbol keys with a spoken label; letters need none.
Next to an action
The shortcut sits inside the button it triggers; aria-keyshortcuts exposes it to assistive tech.
Press Esc to close, or Enter to confirm.
In a sentence
Inline with body text.
API reference
Forwards props and ref to the container element; it only adds composition utilities.
| Prop | Type | Default |
|---|---|---|
KbdOne key; flat cap with no hover or pointer. | kbd | — |
labelSpoken name for symbol keys (⌘ → "Command"); the symbol stays visible. | string | — |
KbdGroupKeys pressed together, as nested kbd elements. | kbd | — |
Accessibility
Uses the kbd element, so assistive tech knows it is keyboard input.
Symbols are read literally (⌘ as "place of interest", ⌥ as "option key" or nothing), so give them a label with the key's name.
It is not interactive and does not look it: no hover state, no pointer, no raised shadow. Put the shortcut next to the action it triggers, never instead of it, and declare it on that control with aria-keyshortcuts.
Server-safe: plain HTML and CSS.