bx

Kbd

A styled element to indicate a keyboard shortcut.

Press ⌘ + K to open
tsx 
<p>Press <Kbd>⌘</Kbd> + <Kbd>K</Kbd> to open</p>

Kbd is a styled HTML <kbd> that marks a keyboard shortcut. Small rendering with a light border and monospace font. Combine it with text (e.g. "Press ⌘K to open").

Installation

Terminal 
$ bext ui add kbd

Usage

tsx 
import { Kbd } from "@bext-stack/ui/primitives"

<p>Press <Kbd>⌘</Kbd> + <Kbd>K</Kbd> to open the command palette.</p>

Anatomy

<Kbd>⌘K</Kbd>

API Reference

Kbd

Prop Type Default Description
children ReactNode — The shortcut (symbol or letter).
className string — Extra classes on the element.

Accessibility

Semantic <kbd> element. Assistive technologies announce "key <content>". For a compound shortcut, wrap each key: <Kbd>⌘</Kbd> + <Kbd>K</Kbd>.

← Item Label →