Skip to content
Docs

Kbd

Represents keyboard input or a hotkey.
Shift + Tab
<.kbd>Shift + Tab</.kbd>

API Reference

This component is based on the kbd element.

Prop Type Default Description
size string Kbd size (1-9). Responsive supported.
variant string "classic" Visual style: classic or soft.
size Kbd size (1-9). Responsive supported.
Type string Default
variant Visual style: classic or soft.
Type string Default "classic"

Examples

Size

Use the size prop to control text size.

Shift + Tab Shift + Tab Shift + Tab Shift + Tab Shift + Tab Shift + Tab Shift + Tab Shift + Tab Shift + Tab
<.flex direction="column" align="start" gap="3">
  <.kbd size="1">Shift + Tab</.kbd>
  <.kbd size="2">Shift + Tab</.kbd>
  <.kbd size="3">Shift + Tab</.kbd>
  <.kbd size="4">Shift + Tab</.kbd>
  <.kbd size="5">Shift + Tab</.kbd>
  <.kbd size="6">Shift + Tab</.kbd>
  <.kbd size="7">Shift + Tab</.kbd>
  <.kbd size="8">Shift + Tab</.kbd>
  <.kbd size="9">Shift + Tab</.kbd>
</.flex>