Light
NeutralInverseSold outIn stockNew editionLow stock
3
Dark
NeutralInverseSold outIn stockNew editionLow stock
3
<span class="tl-tag tl-tag--success">In stock</span>
<span class="tl-badge">3</span>
<span class="tl-badge tl-badge--dot" role="status" aria-label="New"></span>Statuses
Each status pairs a tinted background with a text color that passes AA. There’s no Tomato tag: at tag size Tomato fails contrast, and it would look the same as Danger.
| Status | Example | Use for |
|---|---|---|
| Neutral | Draft | Categories, plain metadata |
| Inverse | Featured | Emphasis without implying status |
| Danger | Sold out | Errors, unavailable |
| Success | In stock | Done, available, live |
| Info | New edition | News, neutral notices |
| Warning | Low stock | Needs attention soon |
Badges
31299+
The dot carries no text, so give it an accessible label like "New". Figma: Tag (6 statuses) and Badge (Count, Dot).