Hotkey component displays keyboard shortcuts or key combinations in a visually appealing way, supporting both standard and Mac keyboard styles with various visual options.
Hotkey component displays keyboard shortcuts or key combinations in a visually appealing way, supporting both standard and Mac keyboard styles with various visual options.
import { Hotkey } from '@lobehub/ui';| Property | Description | Type | Default |
|---|---|---|---|
| keys | Key combination to display | string | - |
| compact | Display all keys in a single pill | boolean | false |
| inverseTheme | Invert the theme colors | boolean | false |
| isApple | Use Mac-style key icons | boolean | Auto-detected |
| variant | Style variant | 'filled' | 'outlined' | 'borderless' | 'filled' |
| classNames | Custom class names | { kbdClassName?: string } | - |
| styles | Custom styles | { kbdStyle?: CSSProperties } | - |
Additionally, Hotkey accepts all properties from the Flexbox component except for 'children'.
The keys prop should be a string with keys separated by +. For example:
'mod' will be Command on Mac and Ctrl on Windows
For convenience, common keys are available as constants via the exported KeyMapEnum object:
Some notable keys in KeyMapEnum:
| Key | Description |
|---|---|
Alt | Alt key |
Ctrl | Control key |
Shift | Shift key |
Mod | Command on Mac, Control on Windows |
Meta | Command on Mac, Windows key on Windows |
Enter | Enter/Return key |
Space | Space bar |
LeftClick | Left mouse button click |
RightClick | Right mouse button click |
MiddleClick | Middle mouse button click |
LeftDoubleClick | Left mouse button double click |
Up, Down, Left, Right | Arrow keys |