Tags represent keywords, categories, or other labels that serve to classify adjacent content.
- Left icon
- Remove icon
Text only (Default)
Use the text-only variant to clearly and succinctly represent a concept within the tag. Text-only variants work well when space is limited or when the tag’s concept is difficult to represent with iconography.
A left icon can be included to add visual emphasis to tags with concepts that are relatively easy to represent with iconography. A tooltip is not required since the label is still present. The left icon can be customized by the user to coordinate with the tag label.
The remove icon can be included when the tag requires the option to be removed from a given context.
Use both icons when tags with left icons also require the option to be removed from a given context.
Primary tags can be used to provide additional emphasis to a particular tag.
Secondary tags are the default appearance and should be used for most situations where no other semantic meaning is required.
Use the inverted tag in place of the primary variant when placed on dark surface colors.
Neutral tags should be used in contexts that are largely informative and have no positive or negative connotation.
Positive tags should be used in contexts that convey a positive connotation such as approved, complete, and deposited.
Negative tags should be used in contexts that convey a negative connotation such as error, alert, or rejected.
Custom tags can be used to create appearances beyond the standard presets.
Small tags should be used when vertical space is limited. Due to its limited height, small tags cannot display a left or right icon.
Medium tags are the default size and can be used in a variety of layouts and contexts.
Large tags are best used in limited contexts where additional visual emphasis is required.
Tags may be grouped together to convey a related taxonomy or set of filters and may can contain a mix of certain variants such as icon, dismissable, and appearance. However, avoid mixing differently sized tags within the same group.
Tags wrap to the next line if they extend beyond the container.
Tags within a group can be aligned to either the start or the end of the container.
Tags are aligned to the left edge of the tag group container.
Tags are aligned to the right edge of the tag group container.