<Hotkey>⌘K</Hotkey>
Hotkey component is used to provide a visual representation of the keys user needs to press to perform an action. You can either render the required keys as Hotkey children or combine multiple Hotkey components.
<View gap={4} align="start"><Hotkey>⌘K</Hotkey><View direction="row" gap={1} align="center"><Hotkey>Shift</Hotkey><Text variant="body-3" weight="medium">+</Text><Hotkey>P</Hotkey></View></View>
Hotkey supports an active state which you can enable manually. You can use it together with the useHotkeys hook to display the currently pressed keyboard keys.
function HookDemo() {const { checkHotkeyState } = useHotkeys({k: () => {},});return <Hotkey active={checkHotkeyState("k")}>K</Hotkey>;}