ComponentsCircular Badge
Components
Circular Badge
Curved-text stamp overlaid on product imagery — mirrors the 'Team Favourite' badge seen on Clean Cosmetics tiles. Flat, no shadow or border; the sage tone is from the accent palette.
Configurator
Usage
<CircularBadge label="Team Favourite" tone="sage" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Text looped along the circumference (auto-uppercased). |
| icon | ReactNode | — | Optional icon centered inside the circle. |
| size | number | 96 | Diameter in pixels. |
| tone | "sage" | "mint" | "sage" | Background tone. |
| className | string | — | Additional classes, merged via tailwind-merge. |
Do's and Don'ts
Do
- ·Keep the label to one or two words — the curved text gets cramped past that.
- ·Position it overlapping the bottom edge of product imagery, matching the real site's placement.
Don't
- ·Don't add a shadow or border to it — the real badge is a flat icon and we've matched that.
- ·Don't invent new tones without adding a token first; sage and mint are the verified circular-badge colors.