ComponentsActions

Kbd

Shows a keyboard key or a shortcut. Use it in text, tooltips, menu rows, and footer hints.

Variants

One 20px size. Keys grow with their label, so a single symbol stays square and a word gets room.

variant="default"Muted fill. Standalone keys and keys inside text.

⌘EnterEscShiftTab

variant="outline"Bordered surface. Hints on tinted strips and selected rows.

↑ ↓↵Esc/[ ]

Keys and key groups

KbdGroup holds keys pressed together. Icons inside a key are 12px.

Open search: ⌘K
Send message: ⌘Enter
Move between results: Up arrowDown arrow
Delete draft: CmdBackspace

Press Esc to close.

Press ⌘K anywhere to search notes, projects, and people.

Footer hints

Outline keys on a tinted strip, each followed by what it does. The strip wraps instead of overflowing.

Selected row

A hidden ↵ key appears on the highlighted row and replaces its shortcut. Use the arrow keys in the field, then Enter.

Nothing chosen yet.

In a tooltip

Keys sit beside the tooltip label and keep their fill on the tooltip surface.

Usage

import { Kbd, KbdGroup } from "@tulipfarm/sprout/kbd";

<Kbd>Enter</Kbd>

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

<p>Press <Kbd>Esc</Kbd> to close.</p>

<span className="flex items-center gap-1.5">
  <Kbd variant="outline">↵</Kbd>
  Open
</span>

Kbd renders a kbd element. It is 20px tall and at least 20px wide, so one symbol is square and a word gets padding.variant is "default", a muted fill, or "outline", a border on the surface color. Use outline on tinted strips, such as a search footer, and on highlighted rows. There is one size.

KbdGroup holds keys pressed together and spaces them 4px apart. It is also a kbd, which is how HTML marks a key combination. An svg inside a key is 12px unless you give it a size class.

Keys ignore the pointer and cannot be selected, so a click on a row or button with a key inside still reaches that row or button.

Selected row

<CommandItem className="result">
  {title}
  <Kbd variant="outline" aria-hidden="true" className="result-enter">↵</Kbd>
</CommandItem>

/* CSS */
.result-enter { display: none; }
.result[data-selected] > .result-enter { display: inline-flex; }

Hide the key until its row is highlighted. Mark it aria-hidden because the row already says it can be chosen.

Accessibility

Kbd is not focusable and has no role. Screen readers read its text. Some symbols, such as ⌘, are read in odd ways, so put the action in words next to the key. For a key that shows only an icon, add visually hidden text inside it. Do not put aria-label on the key.

Color changes follow the theme in 120ms and stop when reduced motion is requested. In forced colors mode every key gets a visible border.

Theme tokens

The default key uses --sprout-secondary and --sprout-muted. The outline key uses --sprout-surface and --sprout-line. Radius follows --sprout-radius-control.