Kbd

Renders a styled <kbd> element representing a keyboard key or key combination. Font size and padding scale through size tokens.

Basic keys

Ctrl

+

C
<Group gap="xs">
  <Kbd>Ctrl</Kbd>
  <Text>+</Text>
  <Kbd>C</Kbd>
</Group>

Common shortcuts

Copy

Ctrl

+

C

Paste

Ctrl

+

V

Save

Ctrl

+

S

Command palette

Ctrl

+

Shift

+

P
<Group gap="xs">
  <Kbd>Ctrl</Kbd>
  <Text>+</Text>
  <Kbd>Shift</Kbd>
  <Text>+</Text>
  <Kbd>P</Kbd>
</Group>

Sizes

xssmmdlgxl
<Kbd size="xs">xs</Kbd>
<Kbd size="sm">sm</Kbd>
<Kbd size="md">md</Kbd>
<Kbd size="lg">lg</Kbd>
<Kbd size="xl">xl</Kbd>

Props

PropTypeDefaultDescription
size'xs'|'sm'|'md'|'lg'|'xl'|number|string—Font size and padding scale
classstring—Additional CSS class names
styleobject—Inline styles
childrenReactNode—Keyboard key label to display