User Tag

Help people label, organize, and categorize things using descriptive keywords.

Cover

Maturity

Alpha

FYQ2 target

Alpha

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.

A user categorization as ReadOnly vs. a sneak peek of our new ComboBox component, currently in definition.

A user categorization as ReadOnly vs. a sneak peek of our new ComboBox component, currently in definition.

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

Density

User Tags come in two densities:

  1. Loose / 32px as default.
  2. Dense / 24px to use inside Dense forms.

Color

Colors

User Tags use non-semantic colors, as individuals choose them to convey varying meanings. These colors are selected from a decoration palette.

Visual accessibility

Protanopia and deuteranopia make you unable to distinguish between red and green.

Protanopia and deuteranopia make you unable to distinguish between red and green.

Protanopia and deuteranopia make you unable to distinguish between red and green.

Protanopia and deuteranopia make you unable to distinguish between red and green.

Tritanopia is a rare genetic color blindness that affects a person’s ability to distinguish between blue and yellow colors.

Tritanopia is a rare genetic color blindness that affects a person’s ability to distinguish between blue and yellow colors.

Achromatopsia is a medical syndrome that exhibits symptoms relating to five conditions, most notably monochromacy.

Achromatopsia is a medical syndrome that exhibits symptoms relating to five conditions, most notably monochromacy.

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

User Tags use decoration colors in the Secondary emphasis levels explained in the Emphasis and semantics page

User Tags use decoration colors in the Secondary emphasis levels explained in the Emphasis and semantics page


Quality checklist

This component passes the following requirements described in our Component lifecycle.

Maturity

Alpha

α · 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.