Usage
import { Kbd } from "chakra-ui-solid";<Kbd>F12</Kbd>Examples
Combinations
Render Kbd to showcase key combinations.
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.
Sizes
Use the size prop to change the size of the Kbd component.
Within Text
Use Kbd within text to highlight key combinations.
Press F12 to open DevTools
Props
| Prop | Default | Type |
|---|---|---|
size | 'md' | ConditionalValue<'sm' | 'md' | 'lg' | PresetVariant<'kbd', 'size'>>The text style and height together. |
variant | 'raised' | ConditionalValue<'raised' | 'outline' | 'subtle' | 'plain' | PresetVariant<'kbd', 'variant'>>How the key is drawn — `raised` gives it the thicker bottom border that reads as a keycap, `outline` is a ring, `subtle` a fill, and `plain` the glyph alone. |
Plus HTMLChakraProps<"kbd"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.
A whole chord fits in one Kbd. The recipe tightens word-spacing, so Shift + Tab reads as a
single cap rather than as three spaced words — the separate elements above are for when the keys are
pressed one at a time.