A shortcut grid component displays keyboard shortcuts with their description in a grid.
Examples
Basic shortcut grid
A basic shortcut grid can be used to display shortcuts available to the user together with their description.
You can customize displayed shortcuts using shortcuts props. For mouse actions with given shortcuts, there are separate props to be enabled. You can customize showing symbols for control keys using showSymbols. The component also accepts all properties of the grid layout.
⌘ Cmd + ⇧ Shift + T
Open new tab
⌥ Opt + N
Open new page
^ Ctrl + Drag
Move object
Single shortcut
Shortcut component can be also used outside of the grid.
Appearance of the component can be customized using the className property.
⌘ Cmd + ⇧ Shift + ClickShortcut description
Props
ShortcutGrid
| Name | Type | Default | Description |
|---|---|---|---|
| shortcutsrequired | ShortcutProps[] | Array of shortcuts to be displayed in the grid | |
| gridItemProps | GridItemProps | Shortcut GridItem props | |
| ouiaId | string | number | 'ShortcutGrid' | Custom OUIA ID |
Shortcut
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | Shortcut className | |
| click | boolean | Show click in the shortcut | |
| description | React.ReactNode | null | Shortcut description |
| drag | boolean | Show drag in the shortcut | |
| dragAndDrop | boolean | Show drag and drop in the shortcut | |
| hover | boolean | Show hover in the shortcut | |
| keys | string[] | [] | Array of shortcut keys |
| ouiaId | string | number | 'Shortcut' | Custom OUIA ID |
| rightClick | boolean | Show right click in the shortcut | |
| showSymbols | boolean | true | Indicates whether symbols should be displayed for certain keys |
