Badge
Sourcecomponents/Badge.astro
Variants
A small label that marks a card — "Most popular", "Case study", "Reserve now". Primary for the highlight, secondary for a quieter tag. Uppercase, no letter-spacing.
primary · secondary
Highlight Neutral
On dark & image
On a dark card or over a photo, use surface="dark" — the secondary badge becomes a translucent-white pill that reads on anything.
surface="dark"
Highlight Neutral
Highlight Neutral
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'primary' | Solid violet, or muted & bordered. |
surface | 'light' | 'dark' | 'light' | Flips the secondary variant to a translucent-white pill for dark cards & imagery. |
<!-- On a light card -->
<Badge>Most popular</Badge>
<Badge variant="secondary">New</Badge>
<!-- On a dark card / over an image -->
<Badge surface="dark">Case study</Badge>Rules
Do
Use it as a content label on a card — one word or two.
Switch to surface="dark" on dark cards and imagery.
Don't
Use it for lifecycle state — that's a Status Tag.
Put a sentence in it — a badge is a marker, not a caption.