Maturity
FYQ2 target
Figma component
Overview
Tags are entities to organize and categorize the content. They come in the Secondary emphasis level using non-semantic decoration colors and have Loose and Dense densities.
ReadOnly User Tags aren’t interactive because they're not navigable or selectable, so they don't have any associated interaction states. However, they can be interactive when they live inside a ComboBox—currently in definition—to let people introduce their keywords.
Related components
How to use
Density
User Tags come in two densities:
- Loose / 32px as default.
- Dense / 24px to use inside Dense forms.
Color
User Tags use non-semantic colors, as individuals choose them to convey varying meanings. These colors are selected from a decoration palette.
Visual accessibility
Our User Tags still lack visual accessibility for people with color blindness. We'll likely add the ability to incorporate icons in the future to solve the issue.
Label
As the user determines the Labels and can edit them at any time, guidelines aren't needed.
States
The state of a component can depend on properties set before people can interact with it. We call them state properties. Differentiating them from the user-triggered states allows us to combine them, creating richer states that cover the whole interaction spectrum.
Related content
Quality checklist
This component passes the following requirements described in our Component lifecycle.
Maturity
α · 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.
β · 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.