A key or a keyboard shortcut, such as ⌘K, set inline in text, in a tooltip or at the end of a menu item.

import { Kbd } from "@plexui/ui/components/Kbd";

Examples

Press / to search, Esc to close.

⌘KCtrlShiftP

⌘K⌘K⌘K

API

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md"`	`"sm"`	Height and text size: 16px, 20px or 24px
`variant`	`"soft" \| "outline"`	`"soft"`	soft fills the key, outline draws its edge; both mix the text color
`className`	`string`	—	Applied to the kbd element

Other <kbd> attributes (title, aria-label, ...) are forwarded.

A row of keys pressed together. Renders a <span> and forwards its attributes.

Kbd reads these component tokens. Override them at any scope to restyle it:

--kbd-background: fill (defaults to the text color at 10%)
--kbd-border-color: edge (transparent for soft, the text color at 24% for outline)
--kbd-color: text color (defaults to inherit)
--kbd-radius: corner radius (defaults to --radius-xs)