Tag
Multiple or single Tags can be used to categorize items. Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
Example
Clearable Tags
Tag con be used both as an indicator of status and to show a selection. Use the clear icon when the selection can be dismissed.
Anatomy
When to use
- Use tags when content is mapped to multiple categories, and the user needs a way to differentiate between them.
- Utilize to visually represent metadata, labels, or categories associated with content.
- Use to facilitate filtering, sorting, or searching functionality within a user interface.
When not to use
- Don’t use as a
buttonorlink - Do not overload the Tag with too much content. It is designed for brief labels or categorizations.
- Avoid overusing for decorative purposes without meaningful context or function.
- Do not use as a substitute for more appropriate UI elements, such as buttons or checkboxes, in interactive contexts.
Alternative components
Dropdown menus or filters can be used instead of TAGs in cases where a more compact or hierarchical presentation of options is needed.