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
classstringExtra classes; merged via cn().
childrenSnippetGlyph(s) to display inside the key cap.

Install

CLI

npx @a3tai/mittsu add kbd