A decorative barcode badge with a monospace caption for editorial and print inspired sections.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge11New here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { Badge11 } from "@/components/beste/component/badge11";
<Badge11 label="Est. 2019, Berlin" />
<Badge11
label="Serial No. 001"
bars={36} // number of bars (default 28)
tone="muted" // "foreground" (default) | "muted" | "primary"
hideLabel // bars only; label stays for screen readers
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Badge11 } from "@/components/beste/component/badge11";
<Badge11
label="Est. 2019, Berlin"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Label under the bars (also seeds the bar pattern) |
bars | number | — | Number of bars |
tone | "foreground" | "muted" | "primary" | — | Bars and label color |
hideLabel | boolean | — | Hide the visible label (it stays available to screen readers) |
className | string | — | Additional classes merged onto the root |
A toast style notification badge with an icon tile, title, and description for product updates.
A hairline, softly rounded eyebrow pill with an uppercase, letter-spaced monospace label for section kickers.
A keyboard shortcut badge with real keycaps for command palettes and developer tools.
An announcement pill badge with a bold tag, message, and optional link arrow for hero sections.