Kbd
kbdDisplays keyboard keys or shortcuts with inline keycap styling.
Usage
Single button
Wraps a single key name and renders it as a bordered keycap style.
Esc
tsx
<Kbd>Esc</Kbd>Key combination
The key combination is spelled out by placing multiple Kbd side by side, connected with separators in the middle.
⌘+K
tsx
<span className="inline-flex items-center gap-1">
<Kbd>⌘</Kbd>
<span className="text-muted">+</span>
<Kbd>K</Kbd>
</span>Embed text
The shortcut keys are shown in the text, and the keycaps are aligned with the text baseline.
Press ⌘ S Save
tsx
<span className="text-sm text-muted">
Press <Kbd>⌘</Kbd> <Kbd>S</Kbd> to save
</span>When to use
Use Kbd to label an individual key such as Esc, ⌘, or K. Compose shortcuts from multiple Kbd elements side by side. It works in server components. Use CodeBlock or Snippet for code instead.
Import
ts
import { Kbd } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| ...HTMLAttributes | HTMLAttributes<HTMLElement> | — | supports <kbd> native attributes (className, style, etc.) |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Key content |
Usage guidelines
- One Kbd renders one keycap. Compose combinations from multiple Kbd elements and add any
+separator explicitly.