Keyboard Shortcut

Displays a platform-aware keyboard shortcut label for buttons, menus, tooltips, and helper text.

Loading...
import { Button, KeyboardShortcut } from 'ui'
 
const shortcuts = [
  { label: 'Open command menu', keys: ['Meta', 'K'] },
  { label: 'Prettify SQL', keys: ['Alt', 'Shift', 'F'] },
  { label: 'Download CSV', keys: ['Shift', 'Meta', 'D'] },
]
 
export function KeyboardShortcutDemo() {
  return (
    <div className="flex w-full max-w-2xl flex-col gap-6">
      <div className="flex flex-wrap gap-3">
        <Button iconRight={<KeyboardShortcut keys={['Meta', 'S']} variant="inline" />}>Save</Button>
        <Button
          type="default"
          iconRight={<KeyboardShortcut keys={['Meta', 'Enter']} variant="inline" />}
        >
          Run query
        </Button>
      </div>
 
      <div className="w-full max-w-md rounded-lg border bg-background p-1.5">
        {shortcuts.map((shortcut) => (
          <div
            key={shortcut.label}
            className="flex items-center justify-between rounded-md px-3 py-2 text-sm"
          >
            <span>{shortcut.label}</span>
            <KeyboardShortcut keys={shortcut.keys} />
          </div>
        ))}
      </div>
 
      <p className="flex items-center gap-1.5 text-xs text-foreground-muted">
        Hit <KeyboardShortcut keys={['Meta', 'K']} variant="inline" /> to open search
      </p>
    </div>
  )
}

KeyboardShortcut renders a compact, platform-aware shortcut label from logical key names.

Use it for button accessories, menu shortcuts, tooltips, and helper copy. Avoid placing it directly inside button label text; render it in a right-side accessory slot such as iconRight instead.

Usage

import { KeyboardShortcut } from 'ui'
<KeyboardShortcut keys={['Meta', 'S']} />

Props

keys

An ordered array of logical key names.

<KeyboardShortcut keys={['Meta', 'Enter']} />

Supported special keys currently include:

  • Meta
  • Alt
  • Shift
  • Enter
  • Esc / Escape
  • Tab

Single-character keys are uppercased automatically.

Variants

Pill (default)

Use the default pill variant for menus, tooltips, and standalone shortcut chips.

<KeyboardShortcut keys={['Shift', 'Meta', 'M']} />

Inline

Use the inline variant when the shortcut needs to sit on the same line as surrounding text or inside a button accessory slot.

<Button iconRight={<KeyboardShortcut keys={['Meta', 'Enter']} variant="inline" />}>Apply</Button>

Examples

Pill

Loading...

Inline

Loading...
PreviousExpanding Textarea