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