Kbd

Kbd is a non-interactive <kbd> styled with the kit's (variant × color) system. The shape and palette axes are the exact set Button exposes, so a shortcut hint speaks the same accent language as the action it labels — but without focus, hover, or click behavior.

import { Kbd } from '@42/ui-react/kbd';

<Kbd>⌘</Kbd>
<Kbd>⌘K</Kbd>
<Kbd variant="light" color="brand">Enter</Kbd>

Playground

<Component variant="default" size="md">  ⌘</Component>

Full prop browser

Variants

The five shape treatments are exactly the set Button uses. The default variant is default — the neutral, bordered key cap that reads as a physical key.

<Kbd variant="default">⌘</Kbd><Kbd variant="filled">⌘</Kbd><Kbd variant="light">⌘</Kbd><Kbd variant="outline">⌘</Kbd><Kbd variant="subtle">⌘</Kbd>

default is palette-independent — color is ignored for fill/text on this variant.

Colors

Any palette color pairs with any variant except default. Reach for a color when the key belongs to a colored action (a green confirm, a red destructive shortcut).

<Kbd variant="light"  color="green">↵</Kbd><Kbd variant="filled" color="red">⌫</Kbd><Kbd variant="outline" color="blue">Tab</Kbd>

Sizes

Single-character keys stay square (a per-size min-w equal to the height); wider labels grow horizontally.

<Kbd size="sm">⌘</Kbd><Kbd size="md">⌘</Kbd><Kbd size="lg">⌘</Kbd>

In context

A Kbd slots cleanly into a Button to surface its shortcut. The button drives layout; the key cap stays neutral.

<Button variant="outline" color="gray" startSlot={<Plus />} endSlot={<Kbd size="sm">⌘N</Kbd>}>New file</Button>

Composing chords

A chord is just a row of keys. Render one Kbd per key and separate them with a +:

<span className="inline-flex items-center gap-1"><Kbd>⌘</Kbd> + <Kbd>⇧</Kbd> + <Kbd>P</Kbd></span>

API

All other props are forwarded to the underlying <kbd> (or asChild element).

Accessibility

Kbd renders a semantic <kbd> element, the right markup for user input / keyboard keys. It is non-interactive — no focus ring, no hover. If a key should be operable (a clickable shortcut row), use asChild with a real <button> so semantics line up:

<Kbd asChild>
  <button type="button" onClick={openPalette}>⌘K</button>
</Kbd>