Kbd
Keyboard shortcut display components for showing key combinations in UI.
⌘K
Kbd
Installation
pnpm dlx stera-ui@latest add kbd
Composition
Use the following composition to build Kbd and KbdGroup:
Kbd
KbdGroup
├── Kbd
└── KbdExamples
Sizes
⌘K⌘K
Kbd Sizes
| Size | Description |
|---|---|
sm | Compact, for tight spaces like tooltips |
md | Default |
Key Combinations
Use KbdGroup to display a sequence of keys.
CtrlB
Kbd Combo
Inside a Button
Use data-kbd="inline-end" to position a Kbd at the trailing edge of a button.
Kbd with Button
Inside an Input
Kbd with Input
API Reference
Kbd
| Prop | Type | Default |
|---|---|---|
size | "sm" | "md" | "md" |
Renders a <kbd> element. Accepts all standard <kbd> props.
KbdGroup
Renders a <kbd> wrapper for grouping multiple Kbd components. Accepts all standard <div> props.