Configurator
New
Usage
<Badge variant="neutral">New</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "neutral" | "ink" | "teal" | "mint" | "success" | "danger" | "paper" | "neutral" | Color treatment of the badge. |
| className | string | — | Additional classes, merged via tailwind-merge. |
| ...props | HTMLAttributes<HTMLSpanElement> | — | Any native <span> attribute. |
Do's and Don'ts
Do
- ·Keep badge text to one or two words ("Sale", "Bestseller").
- ·Use success/danger only for genuine stock or status states, not decoration.
- ·Use paper for badges layered on top of imagery (it carries its own background).
Don't
- ·Don't stack more than one badge on the same corner of a card.
- ·Don't use badge for interactive actions — it has no click affordance; use Button instead.
- ·Don't mix badge variants arbitrarily on the same page; pick one meaning per color.