Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationPlaygroundBlog
Components

Kbd

Represents keyboard input or a hotkey.

View sourceReport an issueView in Playground
Shift + Tab
<Kbd>Shift + Tab</Kbd>

API Reference

This component is based on the kbd element and supports common margin props.

PropTypeDefault
asChild
boolean
No default value
size
Responsive<enum>
No default value

Examples

Size

Use the size prop to control text size.

Shift + TabShift + TabShift + TabShift + TabShift + TabShift + TabShift + TabShift + TabShift + 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>
PreviousEm
NextLink
Edit this page on GitHub.