Keyboard Input

Keys and shortcuts, rendered as keycaps.

Keys

⌘ ⇧ ⌥ ⌃ Esc ⌘ K ⌘ ⇧ P

<Kbd>⌘</Kbd>
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

In a sentence

Press ⌘K to open search, or Esc to close any overlay.

Small

⌘ K

Small keys shrink the default via className (h-4 text-[10px]) to sit inline with 12–14px labels.

In a button & input

⌘ K

Keys also embed inside a Tooltip: place <Kbd> in TooltipContent to surface the shortcut on hover.

<Button variant="outline">
  Accept <Kbd className="translate-x-0.5">⏎</Kbd>
</Button>

<InputGroup>
  <InputGroupInput placeholder="Search…" />
  <InputGroupAddon align="inline-end">
    <Kbd>⌘</Kbd>
    <Kbd>K</Kbd>
  </InputGroupAddon>
</InputGroup>

Markdown for agents: /design/keyboard-input.md · spec: /design.md