Hotkey

<Hotkey>
  ⌘K
</Hotkey>

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 HookDemo() {
  const { checkHotkeyState } = useHotkeys({
    k: () => {},
  });

  return <Hotkey active={checkHotkeyState("k")}>K</Hotkey>;
}