Kbd
@/components/kamod-ui/kbd
Installation
Import Kbd and optionally KbdGroup from `@/components/kamod-ui/kbd`.
pnpm add @kamod-ch/uiUsage
Use Kbd for single keys. Wrap related keys in KbdGroup with gap-1. Use size="sm" for denser UI. On buttons, set data-icon="inline-end" on Kbd for slight nudge (matches Button inline-end icon pattern).
import { Kbd } from "@/components/kamod-ui/kbd";<Kbd />Demo
Modifier row and Ctrl + B style sequence (shadcn KbdDemo).
Usage
Single key element.
Group
KbdGroup clusters keys in prose (shadcn Group example).
Use Ctrl + BCtrl + K to open the command palette
Tooltip
Kbd inside TooltipContent for discoverability.
Input group
Shortcut hints in InputGroupAddon (inline-end), with search icon.
Sizes
sm (h-5) vs md (h-6) for dense toolbars or default body.
API Reference
Props, slots and variants for this component.
Kbd
Kbd component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| size | "sm" | "md" | "md" |
| data-icon | "inline-end" | — |
| children | ComponentChildren | required |
Accessibility Notes
Kbd is often decorative context; ensure shortcuts are described in visible text or aria-label where needed. Do not rely on Kbd alone for critical instructions.