ContextQMD
Back to Chakra Ui

Kbd

apps/www/content/docs/components/kbd.mdx

0.3.0-beta764 B
Original Source
<ExampleTabs name="kbd-basic" />

Usage

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

Examples

Combinations

Render Kbd to showcase key combinations

<ExampleTabs name="kbd-with-combinations" />

Function Keys

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

<ExampleTabs name="kbd-function-keys" />

Variants

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

<ExampleTabs name="kbd-with-variants" />

Sizes

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

<ExampleTabs name="kbd-with-sizes" />

Within Text

Use Kbd within text to highlight key combinations

<ExampleTabs name="kbd-within-text" />

Props

<PropTable component="Kbd" part="Kbd" />