Skip to content
TrademarkTrademark
Docs
Components

Kbd

Updated: May 9, 2025
View on GitHub

The Kbd component is used to display keyboard keys and shortcuts with consistent styling. It's useful for showing keyboard interactions in documentation, tutorials, or application interfaces.

Shortcuts

Use multiple Kbd components together to display keyboard shortcuts.

Label

You can use either the children prop or the label prop to set the content of the Kbd component.

Customization

The Kbd component inherits all Flex props, allowing for customization of its appearance.

API reference

Type
Default
label
The key, as a string.
string—
children
React.ReactNode—
className
string—
style
React.CSSProperties—
…and every FlexProps propinherited—
Edit this page on GitHub