Badge
Overview
The badge component is used to indicate status and highlight a product feature, component, or featured content. Badges are read-only indicators and are not interactive.
Badges should not be overused, as too many can confuse users or dilute their significance.
If you have multiple badges on a page, consider using a banner instead.
Other names: Tag, Label, Chip
Variations
New
When to use: Use the "New" badge for features that have been recently released and are fully functional. This badge highlights fresh additions to the software.
Duration: The "New" badge can remain for a few weeks to a couple of months after a feature is released, depending on user engagement and visibility strategies.
Preview
When to use: Use the "Preview" badge for features or components that are in a testing phase and not yet finalized. This indicates that the feature is available for users to explore but may still have bugs or incomplete functionality.
Duration: Keep the "Preview" badge for as long as the feature is in testing and not finalized. This can range from a few weeks to several months, depending on feedback and development cycles.
Usage guidelines
Content guidelines
Badges should only ever contain text content.
Accessibility
A badge’s meaning should not be communicated by color alone; support the meaning of a badge with appropriate text. This helps users who cannot see color, or who are using assistive technology.
Color contrast ratios should pass the standards for WCAG AA 2.1 compliance.
Related
Referenced in this section:
Accessibility guidelines
Updated 8 days ago