Feature Badge
ProA small inline label used to highlight new, popular, or beta features in navigation menus, cards, and lists. Draws attention to recently added or noteworthy items without disrupting the surrounding layout.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | ||
| New | Bright accent badge indicating a recently launched feature. | Use when a feature has been released within the last 30 days. |
| Popular | Warm-toned badge for frequently used or trending features. | Use to highlight features with high engagement. |
Usage Guidelines
Do
Remove "New" badges after 30 days — stale badges lose credibility.
Don't
Mark everything as "New" — overuse dilutes the signal.
Do
Position the badge inline after the feature label, not before.
Don't
Use badges on features that are not actually new, popular, or beta.
Do
Use sparingly — no more than 2-3 active badges in a single navigation menu.
Don't
Rely on the badge as the only way to communicate status — pair with release notes.
Code
Design Tokens
Accessibility
- Badge text conveys the status — "New", "Popular", "Beta" — no reliance on colour alone.
- If the badge is purely decorative emphasis, use aria-hidden="true" and ensure the status is communicated in a sr-only span.
- Meets 4.5:1 contrast between badge text and background.