Browse the docs

Kbd

A keyboard key. Renders <kbd>, which is the element the HTML spec provides for exactly this, with a thicker bottom border so it reads as something you press.

Open the palette with ⌘ K

Move with ↑ ↓, confirm with Enter

Props

Prop	Values	Default	Description
`size`	`"sm"`, `"md"`	`"md"`	Height and text size.
`className`	string	`""`	Appended after the component's own classes.

All other <kbd> attributes are forwarded, including ref.

Common patterns

// A chord — one Kbd per key, not "Ctrl+K" inside one
<span className="flex items-center gap-1">
  <Kbd>Ctrl</Kbd>
  <Kbd>K</Kbd>
</span>

// Inside a menu row, where the label carries the size
<span className="flex items-center justify-between">
  Search <Kbd size="sm">/</Kbd>
</span>

Notes

Write one Kbd per physical key. <Kbd>Ctrl+K</Kbd> renders the same way but announces as a single token, and the + becomes part of the key name.

On macOS the modifier symbols (⌘, ⌥, ⇧, ⌃) are conventional; on Windows and Linux spell them out. Nothing in the component decides this for you — pick per platform if that matters to your audience.