Kbd

Displays keyboard shortcuts for an action

Usage

The Kbd component displays keyboard keys and shortcuts for an action. Use Kbd.Item to represent individual keys or key combinations.

import { Kbd } from "@elemnts-ui/react"

<Kbd>
  <Kbd.Item />
</Kbd>

Use the size prop to change the visual scale of keys.

Place Kbd within text to render keys inline

Use the variant prop to change the visual style of keys.

Use the colorPalette prop to apply different color themes to keys.

This example showcase differet navigation keys such as ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Enter, PageUp, and PageDown.

Place Kbd within text to render keys inline

Groups multiple kbd component together

Prop	Type	Default
variant	`'primary' \| 'secondary' \| 'tertiary' \| 'surface' \| 'ghost'`	`primary`
as	`React.ElementType`	`undefined`
asChild	`boolean`	`undefined`

Separates kbd within a group

Prop	Type	Default
variant	`'primary' \| 'secondary' \| 'tertiary' \| 'surface' \| 'ghost'`	`primary`
as	`React.ElementType`	`undefined`
asChild	`boolean`	`undefined`

Renders a kbd component

Prop	Type	Default
variant	`'primary' \| 'secondary' \| 'tertiary' \| 'surface' \| 'ghost'`	`primary`
as	`React.ElementType`	`undefined`
asChild	`boolean`	`undefined`