KeybindingHint

React examples

Default

Use the keys prop to describe the keys involved in the shortcut. Combine keys with + to form chords, and separate chords with a space to form sequences. The fake key name Mod represents Command on macOS and Control on other platforms.

<KeybindingHint keys="Mod+S" />

Sequences and chords

Sequences (keys pressed one after another) are separated by a space. Chords (keys pressed simultaneously) are joined with +. See hotkey format details for the full syntax.

<Stack direction="horizontal" align="center" gap="spacious">
  <KeybindingHint keys="g i" />
  <KeybindingHint keys="Mod+Shift+P" />
</Stack>

Format

• Condensed (default): Best for compact contexts like menus and tooltips where each key is rendered as a separate glyph.
• Full: Joins keys with + and is better suited for prose or longer-form copy.

<Stack gap="condensed">
  <Stack direction="horizontal" align="center" gap="condensed">
    <span>Condensed (default):</span>
    <KeybindingHint keys="Mod+K" format="condensed" />
  </Stack>
  <Stack direction="horizontal" align="center" gap="condensed">
    <span>Full:</span>
    <KeybindingHint keys="Mod+K" format="full" />
  </Stack>
</Stack>

Size

Use size="small" for very dense surfaces. The default normal size matches the height of body text.

<Stack direction="horizontal" align="center" gap="spacious">
  <KeybindingHint keys="Mod+K" size="small" />
  <KeybindingHint keys="Mod+K" size="normal" />
</Stack>

Variant

Set the variant prop so the hint maintains sufficient contrast against the surface it appears on.

• normal (default): Use on neutral backgrounds and default buttons.
• onEmphasis: Use on emphasized backgrounds such as banners or popovers with strong fills.
• onPrimary: Use inside primary buttons. The IconButton keybindingHint prop applies the correct variant automatically.

<Stack direction="horizontal" align="center" wrap="wrap">
  <Button trailingVisual={() => <KeybindingHint keys="Mod+Z" />}>Undo</Button>
  <Button variant="primary" trailingVisual={() => <KeybindingHint variant="onPrimary" keys="Mod+Enter" />}>
    Submit
  </Button>
  <IconButton
    icon={InboxIcon}
    aria-label="Notifications"
    description="You have unread notifications"
    keybindingHint="G+N"
  />
</Stack>

More code examples

See the KeybindingHint Storybook stories

Usage

• Use KeybindingHint to expose keyboard shortcuts that are already wired up elsewhere. The component is purely visual — it does not register any keyboard handlers.
• Pair the hint with the action it accelerates so users understand what the shortcut does. Common patterns are the trailing visual of a Button, the trailing visual of an ActionList item, or inside a tooltip on an IconButton.
• Use Mod instead of Control or Command so the hint renders the correct modifier per platform.
• Avoid rendering hints for shortcuts that are not actually available in the current context.

Props