Back to Components

Foundation

Kbd

Keyboard shortcut hint, styled like a tactile key cap. Use for ⌘K hints, menu shortcuts, tooltips.

Examples

Single key

⌘ K
<Kbd>⌘</Kbd> <Kbd>K</Kbd>

Modifier chain

⌘ ⇧ P
<Kbd>⌘</Kbd> <Kbd>⇧</Kbd> <Kbd>P</Kbd>

Cross-platform

Ctrl F
<Kbd>Ctrl</Kbd> <Kbd>F</Kbd>

Props

PropTypeDefaultDescription
classstring—Extra classes; merged via cn().
childrenSnippet—Glyph(s) to display inside the key cap.

Install

CLI

npx @a3tai/mittsu add kbd