Components
Badge
A small status label, in src/components/badge.tsx. For the pill above a headline, use Tag.
IncludedComing soonBest value
<Badge variant="positive">Included</Badge>Variants
| variant | When to use it | Example |
|---|---|---|
positive | Inclusions — "Free", "Included", "Unlimited". | Included |
muted | Not available yet — "Coming soon". | Coming soon |
brand | Highlights — "Best value". | Best value |
sales | Product labels, in the Sales + Operations loop's panel colours. | Sales |
operations | — | Operations |
neutral | Something that isn't Backbone, next to the product labels ("Your current system"). | Your current system |
Guidelines
- Do:Keep it to one or two words.
- Do:Use
salesandoperationsonly to name those products. - Don't:Don't make a badge clickable. Use a Button or Chip.