Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Kbd

Used to show key combinations for an action

SourceStorybookRecipe
Shift + Tab

Usage

import { Kbd } from "@chakra-ui/react"
<Kbd>F12</Kbd>

Examples

Combinations

Render Kbd to showcase key combinations

ctrl+shift+del

Function Keys

Here's an example of using Kbd to showcase function keys

⌘⌥⇧⌃

Variants

Use the variant prop to change the appearance of the Kbd component

Shift + TabShift + TabShift + TabShift + Tab

Sizes

Use the size prop to change the size of the Kbd component

Shift + TabShift + TabShift + Tab

Within Text

Use Kbd within text to highlight key combinations

Press F12 to open DevTools

Props

PropDefaultType
colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'

The color palette of the component

variant 'raised'
'raised' | 'outline' | 'subtle' | 'plain'

The variant of the component

size 'md'
'sm' | 'md' | 'lg'

The size of the component

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Previous

Highlight

Next

Link