Maturity
Overview
Badges provide supplemental information about the status or importance of a parent element. They aren’t interactive, so they don’t have any associated interaction states. But their parent element can be.
Text Badges are preferred over Shape Badges as they are much simpler to understand.
Related components
How to use
Sentiment
Semantic colors are intended to draw attention to essential experience elements and, through specific sentiments, assign them a particular meaning that facilitates their differentiation.
More details
Awake
Interactive, Active, and working as intended
When to use
- Signify an interactive element.
- Something is active and working as intended
Purpose
Encourage action or indicate progress.
Example
- "This is what you can do"
- "Everything is on track"
- "Live"
Dormant
Inactive, asleep, or suspended
When to use
Something’s not available or locked.
Purpose
State something’s unavailable and inform why (when needed/possible).
Example
- "We want to let you know that this is unavailable."
- "Disabled"
- "Pro" (only available in the Pro plan)
Critical
A critical or unexpected situation
When to use
- Something’s not working and requires immediate action because of its importance and severity; regardless if it’s a person’s error or a system error.
- A problem happened, or a person made a mistake that prevented them from finishing their task or a process.
- Indicate actions that are destructive and can’t be undone—they require confirmation.
Purpose
Clearly state what’s going on and provide an actionable solution.
Example
- "We’ve got a problem, and we need to act now."
Warning
Cautionary advice about a potential problem
When to use
Informs about/indicates an action that can be taken to prevent errors or unwanted things from happening.
Purpose
Clearly state what’s going on and provide an actionable solution.
Example
- "We’re letting you know about a potential problem."
- "Unverified"
Success
Achievement of a goal
When to use
When things are done or went accordingly to plan.
Purpose
Inform about success.
Example
- "This is done; everything went well."
- "Enabled"
Featured
Highlighted for special attention, neither good nor bad
When to use
Provides valuable information to people about something important or out of the ordinary, essential to understand the context and making a decision.
Purpose
Neutrally inform people.
Example
- "We’re letting you know about…"
- "New"
- "Beta"
- "AI"
Label
When creating a Badge Label, it’s recommended to use only one word to indicate the status of an element. Two words can be used to describe a more intricate state if necessary. Labels can also contain a number.
Always describe the status in the past tense. For example, use Paused instead of Pause.
Related content
Icon
Badges are a supplemental addition that provides extra context without distraction. They are already enhanced with the Secondary emphasis contrast level.
The Icon property only comes in the Dormant and Featured sentiments; changing its icon is not allowed. Incorporating icons would make them visually dominant, diverting the focus from the primary element they support, and we only want that in key scenarios.
This conscious tradeoff directly impacts our visual accessibility support for people with color blindness for the time being. It’s crucial to write clear labels to effectively convey their meaning to everyone, regardless of their visual ability.
Quality checklist
This component passes the following requirements described in our Component lifecycle.
Maturity
Beta
α · Design tokens
It uses Ariane design tokens.
α · Official assets
It uses the official Ariane assets (e.g., icons and illustrations) in one of the official sizes.
α · Accessible use of color
Its color contrast ratio is at least 4.5:1 for text and interactive areas.
α · Target areas
Its interactive target areas are large enough for users to accurately select them, following the Fitts law.
α · Naming agreement
Its name is agreed upon and shared between design and development.
α · Responsive L1
Is responsive to different viewport sizes.
α · User-triggered states
If the component is interactive, all its possible user-triggered interactive states are defined.
β · Responsive L2
The responsive behavior has been reviewed and validated by the team.
β · State properties
All the possible state attributes are defined.
β · Docs L1
It has essential documentation with at least primary usage.
β · Use cases
All the uses are audited and refined.
RC · Definition agreement
Its naming and properties are audited and aligned in design and code.
RC · Accessible L1
Its accessibility is manually audited, and any significant issues are fixed.
RC · Docs L2
The documentation covers the most common use cases and is expected to be iterated during the Release Candidate phase.
RC · Storybook
Includes a Storybook playground of the component.
Stable · Stable API
The component and its API remain stable, with no breaking changes for at least one month.
Stable · Adaptive
Supports adaptive design via preference queries.
Stable · Docs L3
Detailed documentation exists for design, content, accessibility, and implementation, including do’s and dont’s.
Stable · Tooling
Tooling (such as linters, codemods, etc.) exists to help with migrations and prevent further use of alternatives.