Keyboard Shortcut
ProA styled <kbd> element for displaying keyboard shortcuts and key combinations. Uses a raised, bordered appearance that mimics physical keyboard keys. Supports single keys, modifier combinations, and key sequences with proper visual separators.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Single | ||
| Combo |
Usage Guidelines
Do
Use the <kbd> element for semantic correctness.
Don't
Use <kbd> for non-keyboard content like button labels.
Do
Show platform-specific keys — Cmd on macOS, Ctrl on Windows.
Don't
Assume all users know modifier key symbols — include text labels where space allows.
Do
Use the "+" separator for simultaneous key presses.
Don't
Mix platform conventions — do not show Ctrl+C on macOS.
Do
Provide both the visual key display and a screen-reader-friendly text alternative.
Don't
Code
Design Tokens
Accessibility
- Use the native <kbd> element for keyboard key semantics.
- Provide aria-label on the combo wrapper with a human-readable description like "Command plus S".
- Hide the visual separator characters with aria-hidden="true" to avoid screen readers announcing "plus" between every key.
- Platform-specific symbols (⌘, ⌥, ⇧) need text alternatives — screen readers may not announce them correctly.
- Keyboard shortcuts in menus should be secondary to the action label — place them after the label text.