Inputs/Kbd

Kbd

Displays keyboard key or shortcut.

Themed

When to Use

Use Kbd when you need to:

Display keyboard shortcuts in documentation or help panels
Show shortcut hints alongside buttons or menu items
Indicate hotkey combinations in tooltips or command palettes
Represent individual keys or key combinations in instructional content
Add search shortcut indicators to input fields

When Not to Use

For generic labels or tags — use Badge instead
For supplementary hover information — use Tooltip for contextual help
For clickable actions — use Button with appropriate variants
For inline code snippets that are not keyboard keys — use a standard <code> element

Default

Display keyboard keys with symbols and text labels.

⌘⇧⌥⌃Ctrl+B

Group

Group keyboard shortcuts together with contextual text.

Use Ctrl + BCtrl + K to open the command palette

In Buttons

Display keyboard shortcuts inside buttons to hint at available hotkeys.

In Tooltips

Show keyboard shortcuts inside tooltip content for progressive disclosure.

In Input Group

Display search shortcut indicators alongside input fields.

⌘K

UX & Design Guidelines

Visual Hierarchy

Kbd elements use bg-muted with text-muted-foreground to appear as subtle, non-interactive indicators. When placed inside tooltips, the styling automatically adapts using bg-background/20 for proper contrast against dark tooltip backgrounds. Avoid overusing keyboard shortcuts in a single view — highlight only the most important ones.

Spacing & Layout

Use KbdGroup with gap-1 (default) to group related keys together. When embedding Kbd in buttons, add className="pr-2" to the button for balanced spacing. Keep Kbd elements inline with surrounding text for natural reading flow.

Responsive Behavior

Keyboard shortcuts are primarily a desktop interaction pattern. Consider hiding Kbd elements on touch devices where keyboard shortcuts are not available, or replace them with gesture hints. On narrow screens, long shortcut combinations may wrap — use whitespace-nowrap on the parent container to prevent breaking across lines.

Color & Contrast

The default styling uses semantic tokens bg-muted and text-muted-foreground, meeting WCAG 2.1 AA contrast requirements in both light and dark modes. Inside tooltip content, the component switches to bg-background/20 to maintain readability against the tooltip background. The rounded-sm border radius provides a subtle key-cap appearance.

Accessibility

Keyboard Navigation

Kbd is a presentational element — it is not focusable or interactive by default
When used inside interactive elements like Button, focus follows the parent element
The pointer-events-none class ensures Kbd does not intercept clicks from parent elements

Screen Reader Support

The semantic <kbd> HTML element is announced as keyboard input by screen readers
Symbol-only keys (e.g., ⌘, ⇧) should include an aria-label with the full key name
When displaying multi-key shortcuts, use aria-label on KbdGroup to provide the full shortcut description
Text-based keys (e.g., Ctrl, Shift, Esc) are announced naturally without additional labels

Focus Management

Kbd elements are inherently non-focusable since they serve as visual indicators only. When embedded in focusable parents (buttons, links, tooltip triggers), the parent manages focus. The select-none class prevents text selection, keeping the key label visually stable during interaction.

ARIA Attributes

{/* Kbd uses semantic <kbd> element — screen readers announce it correctly */}
<Kbd>⌘</Kbd>

{/* Provide text alternatives for symbol-only shortcuts */}
<span className="sr-only">Command</span>
<Kbd aria-label="Command">⌘</Kbd>

{/* Group shortcuts with aria-label for context */}
<KbdGroup aria-label="Keyboard shortcut: Control plus S">
  <Kbd>Ctrl</Kbd>
  <Kbd>S</Kbd>
</KbdGroup>

{/* In tooltips, the shortcut is automatically associated */}
<TooltipContent>
  <div className="flex items-center gap-2">
    Save <Kbd>⌘</Kbd><Kbd>S</Kbd>
  </div>
</TooltipContent>

Common Keyboard Symbols

Reference for commonly used keyboard symbols in shortcuts.

⌘ — Command (Mac)

⇧ — Shift

⌥ — Option / Alt (Mac)

⌃ — Control

⏎ — Enter / Return

⌫ — Backspace

⎋ — Escape

↑ ↓ ← → — Arrow Keys

Related Components

Badge

Displays a label or status indicator for categorization and metadata.

Tooltip

A popup that displays information related to an element on hover.

Button

Trigger actions with Kbd shortcuts displayed inline for quick access.

Input Group

Combines input with prefix and suffix elements including shortcut indicators.

API Reference

Kbd

Renders a semantic <kbd> element styled as a keyboard key indicator. Accepts all standard HTML kbd attributes.

Prop	Type	Default	Description
children	`ReactNode`	—	The key label or symbol to display inside the key indicator.
className	`string`	—	Additional CSS classes to apply to the kbd element.

KbdGroup

Groups multiple Kbd components together with consistent inline spacing. Accepts all standard HTML div attributes.

Prop	Type	Default	Description
children	`ReactNode`	—	Kbd components and optional separator elements to group together.
className	`string`	—	Additional CSS classes to apply to the group container.