> ## 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` и `formatShortcut` из `twenty-ui/primitives/typography`. Оба используют одинаковую модель, символы и разделители. Регистрируйте сочетания клавиш в приложении. `Shortcut` только форматирует подсказку; он не регистрирует действия клавиатуры. Нативные атрибуты, обработчики событий, стили, имена классов и ссылки нацелены на его внешний span. `ShortcutProps` и `ShortcutFormatOptions` — публичные типы.

**Light**

[Представления сочетаний клавиш (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-shortcut--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Представления сочетаний клавиш (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-shortcut--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-typography-shortcut--display)

## Использование

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

export const SearchShortcut = () => <Shortcut shortcut={['Mod', 'K']} />;
```

## Комбинации и последовательности

```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'],
});
```

Плоский массив представляет собой одновременное сочетание: `['Mod', 'K']` означает, что нужно нажать Mod и K одновременно. Вложенный массив представляет собой упорядоченную последовательность: `[['G'], ['P']]` означает, что нужно нажать G, затем P. Каждый вложенный массив — это одно сочетание, поэтому `[['Mod', 'K'], ['Mod', 'C']]` означает, что нужно нажать Mod и K, затем Mod и C. Для одной клавиши используйте массив с одним элементом. Обе формы массивов могут быть readonly.

`Mod` и `CommandOrControl` отображают Command в macOS и iOS, а Control — в других системах. Явно указанные клавиши `Command`, `Control`, `Alt` и `Enter` также имеют отображаемые обозначения. Другие строки отображаются как указано. Определение устройства безопасно без глобальных объектов браузера; `platform` позволяет переопределить его значением `mac` или `other`.

Используйте `sequenceJoinLabel` для локализованного текста соединения. `combinationSeparator` может сохранять принятый в приложении формат, например `+`. Текстовый разделитель по умолчанию отсутствует на устройствах Apple и представляет собой пробел в других случаях. `variant` выбирает `keys`, `text` или `button`. `visibility="desktop"` скрывает подсказку при ширине мобильной области просмотра, а `always` оставляет её видимой.

Символы клавиш имеют понятные доступные имена. Используйте `accessibleKeyLabels` для локализации названий отдельных клавиш в выводе программы чтения с экрана. Укажите `aria-label` или `aria-labelledby` для локализованного имени всего сочетания клавиш либо `aria-hidden` для декоративной подсказки. Кнопки сохраняют названия своих действий и скрывают декоративные подсказки на мобильных устройствах. Строки меню и списков сохраняют видимость своих подсказок.

## Внешний вид

Используйте `keys` для отдельных клавиш, `text` для встроенной подсказки или `button` для компактной подсказки внутри действия. Эти варианты изменяют только представление.

**Light**

[Варианты внешнего вида сочетаний клавиш (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-shortcut--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Варианты внешнего вида сочетаний клавиш (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-shortcut--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-typography-shortcut--catalog)

## Миграция

| Предыдущее свойство | Замена |
| - | - |
| Кнопка `hotkeys={['⌘', 'K']}` | `shortcut={['Mod', 'K']}` |
| Последовательные `hotkeys` / `hotKeys` ListItem | `shortcut={[['G'], ['P']]}` |
| `hotkeysJoinLabel` / `hotKeysJoinLabel` | `shortcutJoinLabel` в частях Button, ListItem и Dropdown |
| Ручная конкатенация клавиш в подсказке | `formatShortcut({ shortcut: ['Mod', 'Enter'] })` |

Плоские сохранённые массивы, представляющие последовательные нажатия клавиш, необходимо сделать вложенными перед передачей в `shortcut`: `hotKeys.map((key) => [key])`. Массивы, представляющие одновременные нажатия клавиш, можно передавать напрямую. Строки клавиш остаются литеральными токенами, поэтому `['Mod', '+']` содержит клавишу плюса, а `['Space']` содержит клавишу пробела; разбор строк сочетаний клавиш не требуется.

## Свойства

**accessibleKeyLabels** `Readonly\<Record\<string, string\>\>`

Optional localized names for individual keys in screen reader output.

**combinationSeparator** `string`

Optional separator between simultaneous keys. Defaults to no separator on Apple devices and a space elsewhere.

**platform** `"mac" | "other"`

Optional mac or other platform override. Defaults to server-safe device detection.

**sequenceJoinLabel** `string`

Text between sequence steps. Defaults to then.

**shortcut** `ShortcutDefinition` *required*

Flat key array for a simultaneous combination, or nested key arrays for an ordered sequence of combinations.

**variant** `"button" | "keys" | "text"` (default: keys)

Keycaps, inline text, or a separated button hint.

**visibility** `"always" | "desktop"` (default: always)

Always visible by default. Desktop hints hide on mobile viewports.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.