> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shortcut

> Display simultaneous key combinations and sequential shortcuts.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

<StoryEmbed storyId="ui-typography-shortcut--documentation" title="Shortcut presentations" height={200} />

Import `Shortcut` and `formatShortcut` from `twenty-ui/primitives/typography`. Both share the same model, symbols, and separators. Register shortcuts in your application.

```tsx theme={null}
import { Shortcut, formatShortcut } from 'twenty-ui/primitives/typography';

export const ShortcutExamples = () => (
  <>
    <Shortcut shortcut={['Enter']} />
    <Shortcut shortcut={['Mod', 'K']} />
    <Shortcut shortcut={[['G'], ['P']]} sequenceJoinLabel="then" />
    <Shortcut
      shortcut={[
        ['Mod', 'K'],
        ['Mod', 'C'],
      ]}
      sequenceJoinLabel="then"
    />
  </>
);

const hint = formatShortcut({
  shortcut: ['Mod', 'Enter'],
});
```

A flat array is a simultaneous combination: `['Mod', 'K']` means press Mod and K together. A nested array is an ordered sequence: `[['G'], ['P']]` means press G, then P. Each nested array is one combination, so `[['Mod', 'K'], ['Mod', 'C']]` means press Mod and K, then Mod and C. Use a one-element array for a single key. Both array forms can be readonly.

`Mod` and `CommandOrControl` display Command on macOS and iOS, and Control elsewhere. Explicit `Command`, `Control`, `Alt`, and `Enter` keys also have display labels. Other strings are displayed as supplied. Device detection is safe without browser globals; `platform` optionally overrides it with `mac` or `other`.

Use `sequenceJoinLabel` for localized join text. `combinationSeparator` can preserve a host convention such as `+`. The default text separator is empty on Apple devices and a space elsewhere. `variant` selects `keys`, `text`, or `button`. `visibility="desktop"` hides the hint at mobile viewport widths while `always` remains visible.

Key symbols have readable accessible names. Supply `aria-label` or `aria-labelledby` for a localized name, or `aria-hidden` for a decorative hint. Buttons keep their action names and hide their decorative hints on mobile. Menu and list rows keep their hints visible.

## Migration

| Previous prop | Replacement |
| - | - |
| Button `hotkeys={['⌘', 'K']}` | `shortcut={['Mod', 'K']}` |
| ListItem or MenuItem sequential `hotkeys` / `hotKeys` | `shortcut={[['G'], ['P']]}` |
| `hotkeysJoinLabel` / `hotKeysJoinLabel` | `shortcutJoinLabel` on Button, ListItem, MenuItem, Menu and Dropdown parts |
| Manual tooltip key concatenation | `formatShortcut({ shortcut: ['Mod', 'Enter'] })` |

Flat stored arrays that represent successive key presses need nesting before being passed to `shortcut`: `hotKeys.map((key) => [key])`. Arrays that represent simultaneous keys can be passed directly. Key strings remain literal tokens, so `['Mod', '+']` contains a plus key and `['Space']` contains the Space key; no shortcut-string parsing is required.

<ParamField body="combinationSeparator" type="string">
  Optional separator between simultaneous keys. Defaults to no separator on Apple devices and a space elsewhere.
</ParamField>

<ParamField body="platform" type="&#x22;mac&#x22; | &#x22;other&#x22;">
  Optional mac or other platform override. Defaults to server-safe device detection.
</ParamField>

<ParamField body="sequenceJoinLabel" type="string">
  Text between sequence steps. Defaults to then.
</ParamField>

<ParamField body="shortcut" type="ShortcutDefinition" required>
  Flat key array for a simultaneous combination, or nested key arrays for an ordered sequence of combinations.
</ParamField>

<ParamField body="variant" type="&#x22;button&#x22; | &#x22;keys&#x22; | &#x22;text&#x22;" default="keys">
  Keycaps, inline text, or a separated button hint.
</ParamField>

<ParamField body="visibility" type="&#x22;always&#x22; | &#x22;desktop&#x22;" default="always">
  Always visible by default. Desktop hints hide on mobile viewports.
</ParamField>