TrademarkTrademark
Docs
Ctrl k
Search docs...
Components

KeyTip

Updated: October 10, 2026
View on GitHub
Soon
Not released yet. This is on main and is not in any published version yet. It will not install today.

KeyTip draws a shortcut as Kbd keycaps, optionally after the action it performs. It takes the same string useHotkeys registers, so one constant drives both and the hint cannot drift from the binding. mod shows as ⌘ on macOS and iOS and as Ctrl everywhere else.

A space separates the steps of a sequence, drawn with "then"; an array lists alternatives, drawn with "or". The full syntax is on the useHotkeys page.

In a tooltip

A hover that names the action and its keys teaches the shortcut. Pass a KeyTip as a tooltip's label:

In a sentence

KeyTip is inline, so it sits in a line of text.

Screen readers

Symbols such as ⌘ and ⇧ are read inconsistently, or not at all. The keycaps are hidden from assistive technology, and a screen reader hears the combination spelled out instead: "Undo, Command+Z" on a Mac, "Undo, Control+Z" elsewhere.

The page renders Ctrl on the server, where the platform is unknown, and switches to ⌘ right after it hydrates on Apple platforms, without a hydration warning.

API reference

Type
Default
keysrequired
The shortcut, in useHotkeys syntax. An array lists alternatives.
stringreadonly string[]
—
label
The action, shown before the keys.
ReactNode—
…and every FlexProps propinherited—
Edit this page on GitHub
TrademarkTrademark
Built with curiosity by Lorant One and the Design Engineers Club