Hotkey provides a visual representation of the keys a 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 that you can enable manually. You can use it together with the useHotkeys hook to display the currently pressed keyboard keys.
function Component() {
const { checkHotkeyState } = useHotkeys({
k: () => {},
});
return <Hotkey active={checkHotkeyState("k")}>K</Hotkey>;