Shortcut

A visual keyboard shortcut badge. Renders each key as a styled pill using platform-aware symbols, and optionally registers a global hotkey listener.

Overview

Shortcut renders the keyboard combination passed in keys as styled key badges. When listen is true, it also registers a global keydown listener that fires action when all keys are held simultaneously.

Key rendering is platform-aware: on macOS it uses ⌘, ⌥, ⇧; on Windows/Linux it uses Ctrl, Alt, Shift.

When keys forms an invalid combination (e.g. modifier-only), isHotkeyValid is false and the component returns null — it won't render.

Import

import { Shortcut } from '@unflow/ui/components/Shortcut';

Props

Prop	Type	Default	Description
`keys`	`string[]`	—	Required. Array of key names (KeyboardEvent key values)
`action`	`() => void`	—	Callback fired when the hotkey is triggered
`listen`	`boolean`	`false`	Register a global `keydown` listener
`allowRepeat`	`boolean`	`false`	Fire `action` on keydown repeat events

Visual display

⌘K

⌘⇧P

⌥F

<Shortcut keys={['Meta', 'k']} action={undefined} />
<Shortcut keys={['Meta', 'Shift', 'p']} action={undefined} />
<Shortcut keys={['Alt', 'f']} action={undefined} />

Use listen={false} (or omit) when you only want the visual badge — e.g. inside a menu item to show what hotkey does the same thing.

Active listener

Press ⌘K to trigger the action:

<Shortcut
  keys={['Meta', 'k']}
  action={() => openSearch()}
  listen
/>

When listen is true, pressing ⌘K anywhere fires action. The badge renders normally and highlights briefly when the shortcut is triggered.

Key naming

Follow KeyboardEvent key values:

Physical key	`keys` value
⌘ / Ctrl	`'Meta'`
⌥ / Alt	`'Alt'`
⇧	`'Shift'`
Letter	`'k'`, `'p'`, etc. (lowercase)
Enter	`'Enter'`
Escape	`'Escape'`

Integration with ActionCard

Shortcut is used internally by ActionCard when a shortcut prop is provided:

<ActionCard
  label="Search"
  shortcut={['Meta', 'k']}
  listen
  onClick={openSearch}
/>

ActionCard passes listen down to the internal Shortcut, so you get both the visual badge and the keyboard listener in a single prop.

Accessibility

The badge is visual-only and not announced by screen readers (it's aria-hidden by default).
The keyboard functionality should be documented elsewhere for keyboard-only users (e.g. in a keyboard shortcuts reference page).
Blacklisted keys (arrows, Escape, Tab) are ignored to avoid interfering with native browser navigation.

On this page