An eyebrow kicker badge with an accent square and uppercase, letter spaced label for section headings.
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
/>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 |