App Shortcuts

Kbd renders a single keyboard key hint, and KbdGroup lays out several keys as a chord. Use them to show users which keys trigger an action: in command palettes, menu items, tooltips, and shortcut reference panels. These components are presentational; they display the hint but do not register the shortcut handler.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: kbd.tsx

import { Kbd, KbdGroup } from "@beacon/design-system";

// A single key.
<Kbd>⌘K</Kbd>

// A key combination.
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

// In a shortcut reference row.
<div className="flex items-center gap-2 text-sm">
  <span className="w-32 text-muted-foreground">Save</span>
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>S</Kbd>
  </KbdGroup>
</div>

Parts

Part	Role
Kbd	A single key hint, rendered as a kbd element. Accepts standard kbd attributes including className.
KbdGroup	Inline container that spaces multiple Kbd keys into a chord.

Both adapt their styling when placed inside a tooltip via the data-slot=tooltip-content selector.

When to use

• Document shortcuts in a command palette or shortcut reference panel.
• Show the key hint next to a menu item or button tooltip.
• Display a key combination as a chord with KbdGroup.

Do not rely on Kbd to wire up the shortcut itself. It only renders the hint; register the actual key handler in your component logic.