Skip to main content Skip to navigation Skip to search

Tags show concise metadata in a compact format.

Usage

Use a tag to show the metadata when the space is limited or when you want to catch user’s attention. It is commonly used for descriptive tags or filter items. The distinctive visual style of tags deliberately deviates from buttons. This prevents users from confusing tags with buttons and allows tags to co-exist with other components without competing for a user's attention with primary and secondary buttons on the screen.

Fruit Meat Drink Vegetable

Color

The Clarity color palette and the colors you are using throughout your application should guide which colors you choose for your tags. We recommend reserving traffic light colors (red, yellow, and green) to display state or status.

If the intent is to use colors to have groups of tags be visually distinct from one another, keep in mind that there may be accessibility issues around using color as your sole differentiator.

Avoid using too many colors within the same context, displaying too many colors may distract the user from the core of your application and the information it presents.

Seattle Austin Los Angeles Palo Alto St. Louis

Tags and Badges

Tags and badges can be used together to show a count relating to the metadata displayed in the tag.
Production12items. Testing99+items.

Additional Metadata

Differentiate tags from buttons.

London (Location)

Do

Describe additional information with parenthesis

LONDON (LOCATION) LONDON
(LOCATION)

Don't

Use all capitalization or multi-lines

Behavior

Clicking Labels

Tags may be clickable. In this case, clicking on a tag should perform an action related to that tag. Clicking on a location tag used as a tag, for example, could serve to filter the results in a nearby list by that location. Clicking a tag could also display more information about the metadata described by that tag.

Chocolate Vanilla Strawberry

Dismissing Labels

A tag can be dismissed. "Closable" tags display a close icon at the right-most side of the tag. A tag cannot be closable and clickable. A tag can only be one or the other.

Chocolate Vanilla