Guidelines
When to use
- Categorization: Use tags to categorize content based on specific criteria, such as topics or types.
- Distinguishing items: Use tags to make types or attributes stand out, like highlighting different types on a table column (one tag per cell).
When not to use
- Semantic meaning or statuses: Do not use Tags to convey success, error, warning, or other semantic information. Use Status Indicators instead.
- Collections or grouping: Tags should not represent groups, multiple related items, or user selection. Use Chips instead.
- Indicating overflow items: Do not use tags to indicate additional items that don’t fit in the available space. Use Chips instead.
- Highlighting updates or new content: Tags should not indicate updates or draw attention to new information.Use a Badges instead.
Don't use Tags to group a collection of similar items or indicate overflow of items.
Use Chips to group attributes that are related and don't need distinction.
Best practices
- Avoid stacking multiple tags in a single cell or element. A Tag should ideally indicate only one type or attribute at a time.
- Prefer tags in tables, lists, or next to data visualization elements for quick visual distinction.
- Use tags to label or categorize content with concise, descriptive keywords. Keep them short and clear.
- Use filled variants for consistency and reduced visual load. Outlined variants will be deprecated.
- Ensure tags complement the design and do not compete with other visual elements.
Tags vs. Status Indicators vs. Chips
|
Component |
Purpose |
Interactivity |
Typical Use |
|---|---|---|---|
|
Tags |
Display single categorical items. |
Purely informational; never interactive. |
Table columns or contexts where categories need emphasis. |
|
Status Indicator |
Highlight the current status or state of an item. |
Not removable; only interactive with Tooltips (hover), or Popovers (click). |
Tables, dashboards, or cards where the status is dynamic and meaningful. |
|
Chips |
Represent selections or items in a collection. |
Can be interactive (removable) or read-only. |
Forms (Multiselect), overflow indication, or tables to show grouped items. |
Properties
Variants
Tags are used to differentiate types and categories without conveying semantic meaning. Their variants differ only in color, and changing them does not affect the tag’s purpose. Use and combine them freely.
Icon-only Tags
Icon-only Tags were linked to the deprecated Semantic variants. Avoid using them, as they can cause usability issues, especially for screen reader users or people unfamiliar with the icon’s meaning.
Don’t use icon-only Tags, especially for decorative purposes.
For purely decorative elements, use the Highlight Icon.
Outline
The outline property is currently available in code but will be deprecated soon. Use filled variants for new designs.
Content
Match terminology used elsewhere in the UI
Tags should reflect the terminology used elsewhere in the UI, such as in tables, dashboards, or reports. Ensure they match existing labels for rooms, reservations, or items.
Keep them short and scannable
Use 1–2 words that clearly convey the category or type. Each tag represents a single item or state in a table cell or dashboard element.
✅ Out of service
✅ Inspected
✅ Clean
Use sentence case with no punctuation
✅ Dirty
🚫 Dirty! / dirty
Avoid using verbs or actions
Tags describe states or categories, not actions users should take.
✅ Reserved
🚫 Reserve room