YuhuanStudioYunUIDocs
Data Display

Kbd

A single keyboard key rendered as a real <kbd> — a bordered, monospaced chip for documenting shortcuts inline.

A single keyboard key rendered as a real <kbd> element — a bordered, monospaced chip for documenting shortcuts inline.

It is presentational only: it does not listen for the key it names. To bind the shortcut itself, see CommandPalette and its useCommandPaletteShortcut hook.

Import

tsx
1import { Kbd } from "@yuhuanowo/yunui";

Usage

Compose one Kbd per key. The chip has a min-w-5, so a lone letter stays square instead of collapsing to the width of its glyph.

Kbd

Open search KDismiss EscSubmit

Props

Kbd takes no props of its own — it forwards every <kbd> HTML attribute, including className.

On this page