Shortcut and formatShortcut from twenty-ui/primitives/typography. Both share the same model, symbols, and separators. Register shortcuts in your application.
['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
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.
string
Optional separator between simultaneous keys. Defaults to no separator on Apple devices and a space elsewhere.
"mac" | "other"
Optional mac or other platform override. Defaults to server-safe device detection.
string
Text between sequence steps. Defaults to then.
ShortcutDefinition
required
Flat key array for a simultaneous combination, or nested key arrays for an ordered sequence of combinations.
"button" | "keys" | "text"
default:"keys"
Keycaps, inline text, or a separated button hint.
"always" | "desktop"
default:"always"
Always visible by default. Desktop hints hide on mobile viewports.