Kbd
Renders a keyboard key badge using the semantic <kbd> HTML element. Use to document shortcuts, command palette hints, or hotkey references.
- ✓Semantic <kbd> element — correctly announced by screen readers
- ✓Monospace font for authentic key appearance
- ✓Composable — nest multiple Kbd for multi-key shortcuts
- ✓No dependencies
Press ⌘K to searchCtrlS to saveEscape to close
import { Kbd }from "@aetherstack/ui"
kbd.tsx
import { Kbd } from "@aetherstack/ui"
<span>Press <Kbd>⌘</Kbd><Kbd>K</Kbd> to search</span>
<span><Kbd>Ctrl</Kbd><Kbd>S</Kbd> to save</span>
<span><Kbd>Escape</Kbd> to close</span>Usage
In a command palette hint
Show shortcuts alongside menu items.
Search⌘K
New file⌘N
Save⌘S
In a search input
Place inside the search trigger to hint the keyboard shortcut.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional classes for sizing, color, or spacing overrides. |
| ...props | React.HTMLAttributes<HTMLElement> | — | All standard HTML element attributes. |
* Required props
Accessibility
- →<kbd> is a semantic HTML element — screen readers announce its content as keyboard input.
- →For multi-key combos, wrap each key in its own Kbd rather than putting the whole shortcut in one.
- →Avoid using Kbd as an interactive element — it's presentational only.