A monospace eyebrow badge that wraps its label in brackets, with a vertical orientation option.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge7New here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { Badge7 } from "@/components/beste/component/badge7";
<Badge7 label="About" />
<Badge7
label="Est. 2019"
bracket="square" // "round" (default) | "square" | "curly" | "angle" | "none"
tone="foreground" // "muted" (default) | "foreground" | "primary"
vertical // rotate for edge placement (e.g. along a hero side)
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Badge7 } from "@/components/beste/component/badge7";
<Badge7
label="About"
/>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) |
bracket | "round" | "square" | "curly" | "angle" | "none" | — | Which characters wrap the label. Limited to the BRACKETS set. |
tone | "muted" | "foreground" | "primary" | — | Label color |
vertical | boolean | — | Render rotated for vertical edge placement (e.g. along a hero side) |
className | string | — | Additional classes merged onto the root |
A hairline, softly rounded eyebrow pill with an uppercase, letter-spaced monospace label for section kickers.
An eyebrow kicker badge with an accent square and uppercase, letter spaced label for section headings.
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.