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
| Prop | Default | Type |
|---|---|---|
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.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |