Use the Kbd component to visually represent keyboard keys in your documentation, user guides, or anywhere else you want to highlight keyboard interactions.

Basic Usage

Displays a single keyboard key.


<Kbd shortcut={['Ctrl']} />

Combination

To display a combination of keyboard keys.


<Kbd shortcut={['Ctrl', 'Shift', 'P']} />

Different Variants and Sizes

You can use the variant and size props to customize the appearance.


<Kbd variant="ghost" size="large" shortcut={['Alt']} />

API

Props

Prop	Type	Default	Required
`variant`	`'solid' \| 'ghost'`	`'solid'`	-
`shortcut`	`WoozCommandCode[]`	-	Yes
`MarginProps`	`Token<MarginProps>`	-	-
`color`	`ThemeAccentColor`	-	-
`size`	`Responsive<Size>`	`'medium'`	-

Aspect Ratio

Scroll Area