An eyebrow kicker badge with an accent square and uppercase, letter spaced label for section headings.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge6New here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { Badge6 } from "@/components/beste/component/badge6";
<Badge6 label="About us" />
<Badge6
label="Our services"
tone="foreground" // accent square: "primary" (default) | "foreground" | "muted"
orientation="vertical" // stack the square above the label
labelClassName="text-background/70" // override label classes on dark surfaces
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Badge6 } from "@/components/beste/component/badge6";
<Badge6
label="About Us"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Eyebrow label (rendered uppercase) |
tone | "primary" | "foreground" | "muted" | — | Accent square color |
orientation | "horizontal" | "vertical" | — | Layout: square beside the label (default) or stacked above it |
labelClassName | string | — | Override the label classes, e.g. "text-background/70" on dark surfaces |
className | string | — | Additional classes merged onto the root |
A hairline, softly rounded eyebrow pill with an uppercase, letter-spaced monospace label for section kickers.
A monospace eyebrow badge that wraps its label in brackets, with a vertical orientation option.
A decorative barcode badge with a monospace caption for editorial and print inspired sections.
An announcement pill badge with a bold tag, message, and optional link arrow for hero sections.