How they help
Tags in a UI help users by categorizing and organizing content, making it easier to find, filter, and navigate information. They provide quick visual cues about the topics or attributes of items, such as articles, products, or posts. This enhances searchability, improves content discovery, and allows them to explore related items efficiently.
Example of tags
Anatomy
- Icon: optional visual to help give clarity to user
- Text
- Dismiss button: optional visual to make tag interactive
- Avatar❖: optional visual when using a tag associated with a person
Variants
There are 4 variants of the component: with dismiss button, avatar, icon before and text only.
Designer resources