Data

Kbd

Keyboard key hint rendered with semantic kbd elements and a mono font; multiple keys join into a combination with a plus separator.

Import

import { Kbd } from "@zephora/react";

EscEnterTab

<Kbd>Esc</Kbd>
<Kbd>Enter</Kbd>
<Kbd>Tab</Kbd>

"keys" renders each key separately, joined with a "+" separator.

Ctrl+KShift+Alt+F

<Kbd keys={["Ctrl", "K"]} />
<Kbd keys={["Shift", "Alt", "F"]} />

Ctrl+CCtrl+CCtrl+C

<Kbd size="sm" keys={["Ctrl", "C"]} />
<Kbd size="md" keys={["Ctrl", "C"]} />
<Kbd size="lg" keys={["Ctrl", "C"]} />

Prop	Type	Default	Description
`keys`	`string[]`	—	Multiple keys rendered as a combination joined with "+" (e.g. ["Ctrl", "K"]). When omitted, children is rendered as a single key.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Typography scale.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.