Usage
Tags are labelled objects designed to stand out for the purpose of easy categorization.
They are often seen in the context of lists and tables in order to highlight certain differences between their contents. Using Tags in a table draws attention to specific pieces of information.
Anatomy
For a more detailed breakdown of spacing and sizing, view the design specs.
Tag
- Container: the container of the Tag
- Label: the text signifying the explicit meaning of the Tag
Filter tag
- Container: the container of the Filter Tag
- Label: the text signifying the explicit meaning of the Filter Tag
- Deselector: the 'x' that deselects an active Filter Tag ('remove' button?)
- Divider: the bar that separates the deselector from the main body of the Filter Tag
Placement
Tags are usually placed right next to the name of whatever they are categorizing, or they are placed in a distinct column in the context of a table.
There should typically be 5px of spacing between a tag and other elements. If those other elements are also tags, however, the spacing between them should be 2px so they are more easily perceived as being grouped together.
If there are multiple tags being used, they should ideally be organized in one row unless there isn’t enough space.
Behavior
Tags are static objects that should not be used an interactive elements.
Best practices
Use text labels that are more than 15 characters or that contain more than two words.
Use more than six tags together at a time.
Try to use tags colors in a way that is consistent with how they are used elsewhere in the Zywave suite.
Use any tag colors other than the eight Booster-approved color pairings, which have all been tested for optimal contrast that is accessible to users with vision impairments.