Components
Kbd
Keyboard shortcut indicator displaying key combinations.
⌘K
Installation
npx asteria-ui add kbdUsage
import { Kbd, KbdGroup } from "@/components/ui/kbd";
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>Examples
Single key
Esc
Three keys
⌘⇧K
In a menu item
Search⌘K
API reference
Kbd
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The key label, e.g. a letter, symbol, or word like "Esc". |
KbdGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | One or more Kbd elements. A decorative "+" is inserted between each. |
Accessibility
Accessibility
Semantic element. Renders a native
<kbd>element, which screen readers announce as the key name.Decorative usage. When shown next to a menu item or tooltip purely as a hint (not the primary label), wrap the group in
aria-hiddenso it isn't announced twice.Separator. The "+" between keys in
KbdGroupis decorative and markedaria-hidden.Contrast. Uses
fg-secondaryonbg-secondary, which meets contrast requirements in both light and dark mode.
When to use
Use to display keyboard shortcuts — in tooltips, docs, or menu items. Shows a visual representation of key combinations.
Do:
- Use platform-appropriate symbols (⌘ on Mac, Ctrl on Windows)
- Place near the action it triggers
- Keep combinations simple (3 keys or fewer)
Don't:
- Show shortcuts that don't actually work
- Use
Kbdpurely decoratively with no real shortcut behind it - Conflict with existing browser or OS shortcuts
Related components
- Tooltip — shows shortcuts on hover
- Dropdown Menu — displays shortcuts next to actions
- Badge — for non-keyboard indicators