Tag
Tags show concise metadata in a compact format.
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.
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.
Differentiate tags from buttons.
Describe additional information with parenthesis
(LOCATION)
Use all capitalization or multi-lines
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.
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.