A keyboard shortcut badge with real keycaps for command palettes and developer tools.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge22New here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { Badge22 } from "@/components/beste/component/badge22";
<Badge22 keys={["⌘", "K"]} label="to search" />
<Badge22
keys={["Ctrl", "Shift", "P"]}
label="opens the palette"
tone="outline" // "muted" (default) | "outline"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Badge22 } from "@/components/beste/component/badge22";
<Badge22
keys={["⌘","K"]}
label="to search"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
keys* | string[] | — | The keys, one per keycap (e.g. ["⌘", "K"]) |
label | string | — | Muted text after the keys (e.g. "to search") |
tone | "muted" | "outline" | — | Keycap style: muted fill (default) or bordered outline |
className | string | — | Additional classes merged onto the root |
A decorative barcode badge with a monospace caption for editorial and print inspired sections.
A toast style notification badge with an icon tile, title, and description for product updates.
A marker highlight badge that draws a highlighter stroke behind key words in headlines.