Shortcut
Last Updated: September 2026Shortcuts render keyboard accelerators as consistent keycaps, optionally beside an action label.
Source CodeAnatomy
link- 1Action
- 2Keys
Variants
linkWith action
Label plus keycaps for discoverability.
Keys only
Keycaps without an action label — useful in dense menus.
Single key
shortcut accepts a string for one key.
Box vs text
variant box (default) draws keycaps; text is flatter.
Platform-aware mod
mod resolves to ⌘ on macOS and ctrl elsewhere.
Usage Guidelines
linkWhen to use
- •To document keyboard shortcuts next to menu items or commands.
- •When teaching power-user accelerators in search or command palettes.
- •For consistent keycap rendering across platforms (cmd / mod mapping).
When not to use
- •As the only affordance for an action — always pair with a visible control.
- •For long instructional prose — keep shortcuts scannable.
- •When the action has no keyboard equivalent.
Prefer semantic tokens (cmd, mod, enter, shift) so symbols map correctly.
Don't hardcode platform glyphs like ⌘ in the prop — use cmd or mod.
Pair Shortcut with a visible Menu or Button action — never keys alone as the only cue.
Don't present Shortcut as a standalone clickable control.
Behaviors
linkshortcut prop
- •Accepts string | string[] — a single key or a chord.
- •Keys are case-insensitive for symbol lookup; unmapped keys render as-is (uppercased when no symbol).
Symbol map
- •Mapped tokens include cmd, opt, ctrl, caps, shift, space, enter, bksp, tab, and arrow keys.
- •mod resolves to cmd on macOS and ctrl on other platforms (SSR falls back to non-mac).
Variants
- •box (default) — each key in a soft keycap.
- •text — same glyphs without the boxed background.
Content Guidelines
linkAction labels
- •Keep action short and verb-led ('Open search', 'Confirm').
- •Omit action when the surrounding Menu item already names the command.
Keys
- •Order modifiers first, then the primary key (mod → shift → letter).
- •Use stable tokens from the map rather than locale-specific words.
Accessibility
linkText & Labels
- •Keys render inside <kbd> for semantic keyboard input styling.
- •If action is omitted, ensure the parent row has a visible accessible name.
ARIA attributes
- •Shortcut is presentational — it does not register hotkeys by itself.
- •Wire actual key handling separately (e.g. hotkey hooks) and keep labels in sync.
Keyboard Support
- •Display-only; Tab does not land on Shortcut unless you wrap it.
- •Documented shortcuts should match real handlers in the product.
WCAG Compliance Standards
FAQs
linkDoes Shortcut bind hotkeys?
No. It only renders labels and keycaps. Implement listeners separately and keep the displayed chord in sync.
What does mod do?
mod is platform-aware: ⌘ (cmd) on macOS desktop, ctrl elsewhere. Prefer mod for cross-platform chords.
string vs string[]?
Pass a string for one key ("enter") or an array for chords (["mod", "shift", "p"]).