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 hover or click behavior.

import { Kbd } from '@42-central/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: a translucent fill that adapts to whatever surface it sits on, a hairline border, and a 1px shade along the bottom edge for the lip of a real 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

Each size steps the type by one Tailwind step — sm 12px, md 14px, lg 16px — so pick the one that matches the text the key sits beside: sm inside a Button or a search field, md in body copy. Single-character keys stay square (a per-size min-w equal to the height); wider labels grow horizontally. An icon inside a key draws a 1.5px stroke at every size.

<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="neutral" 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 a display element — no hover treatment, no click handling. If a key should be operable (a clickable shortcut row), use asChild with a real <button> so semantics line up; the kit's focus ring rides along, so the key is keyboard-visible without any className of your own:

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

Changelog