Tag

Tags are frequently used to categorize topics, products, or subjects. They often summarize the page content. If used in this instance, make sure tag subjects are relevant to the displayed content.

Tags can also be used as facets to filter attributes. They allow users to refine their search results by allowing them to exclude or include specific preferences in search queries. Tags in this instance are dismissible.

Tag groups are typically left-aligned when stacked and display a specific margin between them, depending on the size of tag used. The recommended space between each tag should be a multiple of 4 pixels (read more in the Baseline grid section on the Grid foundations page). Use the same value for horizontal and vertical spacing if the tag group’s containing element is too narrow and tags need to wrap into multiple lines. Spacing may be customized if another value better fits the layout.

Tags display five states of behavior: rest, hover, press, inactive, and focus. If used, the dismissible icon area will display the states separately.

There are no specific guidelines on which color tag to choose for an experience. Designers may opt to associate a color with a product, category, or a user persona. The only recommendation is to keep the color consistent with the associated category and consider that using too many colors in certain experiences may introduce a heavy cognitive load for some users. Tags are available in the full color suite, except for white and light blue.

Tags should not rely on color to communicate meaning

While tags can use colors to help differentiate them from each other, they should not use color specifically to communicate meaning. While a tag’s meaning can be reinforced using an accompanying icon, its meaning must be visually self-evident and the icon commonly used in that context, such as an error alert, check, or copy icon.

WCAG 2.1: 1.4.1: Use of Color


Ensure tags have appropriate contrast against the surrounding background

Tags should meet 3:1 minimum contrast against the page (surrounding) background. This is especially important for dismissible tags, which are considered active user interface components and are required to meet this level by accessibility guidelines.

WCAG 2.1: 1.4.11: Non-text Contrast

Avoid using icons that could be confused for additional UI elements

If using icons alongside tag text, avoid ones that could be mistaken for user interface elements, such as DDS’ close-x (resembling an X) or plus-add (resembling a plus symbol). If in doubt, make sure to test with users first, and include participants with a range of abilities and experiences.

Use gray tag variants with care, particularly with dismissible tags

Unlike badges, tags are an active user interface component. Consequently, gray variants should be avoided where possible so as to minimize user confusion regarding whether or not a tag is disabled.

Capitalization and case
Write tag labels in sentence case. This means that only the first letter of the first word is capitalized.


Punctuation
Don’t include punctuation in tag text other than a hyphen to separate words.


Tag labels
Tag text should clearly explain the topic of the tag while avoiding ambiguity. Remember, tag is a label, not a description.


Word length
Tags should be short and ideally contain only one or two words.

Tags are often used to call out unique keywords that specify and summarize content. Using unique, relevant terms as tags can strengthen a page’s search visibility.