Skip to main content Skip to navigation Skip to search

Labels show concise metadata in a compact format.

Usage

Use a label to show the metadata when the space is limited or when you want to catch user’s attention. It is commonly used for tags, or fitter items. The distinctive visual style of labels deliberately deviates from buttons. This prevents users from confusing labels with buttons and allows labels 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

Anatomy

Labels are visually styled to differentiate them from buttons.

Color

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

If the intent is to use colors as a way to have groups of labels 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 New York Palo Alto San Francisco

Labels and Badges

Labels and badges can be used together to show a count relating to the metadata displayed in the label.
Documentation for Badges is available here.
Production12 Dev/Test99+

Additional Metadata

Differentiate labels from buttons.

London (Location)
Describe additional information with parenthesis
LONDON (LOCATION) LONDON
(LOCATION)
Use use all capitalization or multi-lines

Behavior

Clicking Labels

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

Dismissing Labels

A label can be dismissed. Use a close icon at the right-most side of a label to dismiss it.

Content

Status

Info Success Warning Error

Labels with badges