Skip to content
Content

Kbd

Keyboard key cap for shortcut hints.

React source Astro source Core source

Kbd

Inline keyboard key caps for shortcut hints in docs, menus, and empty states.

Examples

Default

A single shortcut rendered as adjacent key caps.

Press ⌘ K
Demo.tsxtsx
import { Kbd } from '@var-ui/react';

<span>
  Press <Kbd>⌘</Kbd> <Kbd>K</Kbd>
</span>

Key combo

Compose several Kbds in sequence for multi-key shortcuts (⌘K, ⌘S).

Open the palette with ⌘K, then save with ⌘S
Demo.tsxtsx
import { Kbd } from '@var-ui/react';

<span>
  Open the palette with <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>, then save with <Kbd>⌘</Kbd>
  <Kbd>S</Kbd>
</span>

Props

Accessibility

Kbd renders a semantic <kbd>. Keep surrounding copy so the shortcut is understandable without relying on the glyph alone (for example “Press ⌘ K to open”).