Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.
When to use
- To categorize or classify a corresponding object
- To communicate user-generated labeling
When not to use
- To communicate system-based labeling (use Badge instead)
- To link to a resource or page (use Link instead)
Best practices
Do restrict the Tags in size to 180px and truncate text within.
Don’t use different types of tags next to each other.
Do vertically align tags to neighboring elements.
Don’t change the placement of the dismiss icon.
Do use a Tooltip when Tag label is truncated for both hover and focus states.
Don’t wrap Tag label text into multiple lines.
Do always display Avatars for Spaces and Projects.
Don’t embed links in Tags.
Don’t use Tags to signify a missing resource. Use text instead.
Don’t use Tags as links embedded in sentences. Use links instead.