COMPONENTS
Tag
Tags display a single category, dimension or property related to adjacent content.
Tags are used to label, organize, or categorize objects. Tags can also serve as a label for content or display counts.
- Tag container
- Dismissible icon
- Label
Display tags are used to display quick and useful category labels to the user. They are often used to display genres, categories or active filters.
Toggle tags can be turned on and off when selected by the user. Toggle tags are always present on the interface and are often used for filtering data on the page.
Selected tags can optionally have a checkmark for extra indication that the tag is selected. The addition of the graphical checkmark helps to improve accessibility by not only relying on color.
Tags are available in three types of emphasis — bold, subtle or minimal and can use color for visual categorization.
Note: All text within the minimal emphasis tag component is WCAG 2.1 AA compliant on surface-primary, surface-secondary, and surface-tertiary, with the exception of yellow which is not AA on surface-tertiary. All other colored backgrounds need to be checked for AA contrast compliance. See surface tokens.
Toggle Tag also supports color, but is slightly different from Display Tag. For a Toggle Tag, the enabled state is always a less saturated gray fill or no background fill. The selected state will then use the designated color to determine the background fill and text color.
Display tags have 6 possible interactive states — enabled, hover, active, focus, disabled and selected. The bolder selected state here is only used when a user needs to bulk edit or bulk remove a set of tags and selects shift while selecting tags.
Toggle Tags have two core states — enabled and selected. Each of which then has four additional interaction states — hover, active, focus and disabled.
The dismissible property allows for any tag to be actively removed by the user and is often seen in Filtering. If a user can remove or dismiss a tag, the application should provide a way for them to easily add it back.
Tags can be displayed in large, medium, small and extra small sizes.
- Write labels in sentence case.
- Keep labels short to avoid wrapping.
- Do not overload an interface with tags as they will become less meaningful and more easily scanned over.
DON'T: Use multiple emphasis types within one UI. Stronger emphasis is used to denote selected states in many scenarios and may confuse the user.
DON'T: Use too many colors for tags within one UI. Typically only one color should be used for tags. Mulitples colors should only be used when the meaningful to the user.
Contents