Label
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.
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.
Labels and Badges
Additional Metadata
Differentiate labels from buttons.
(LOCATION)
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.