Tag

Component Status

Design Usage

A Tag is a compact element used to highlight or classify content with a keyword, status, or attribute. Tags help users quickly scan, filter, or understand metadata. They are usually short (one or two words) and can be styled with different semantic colors and intensity levels (subtle vs. default) to reflect meaning or emphasis.

---

When to Use

• To label content with attributes (e.g., “New”, “Beta”, “Sold out”).
• To categorize or classify items with keywords.
• As filters or chips in search and discovery contexts (when interactive).
• To display status or state (e.g., “Active”, “Draft”, “Archived”).

---

When Not to Use

• For primary actions – use a Button instead.
• For navigation between views or sections – use Tabs or Navigation.
• For long text – tags should remain short; use inline text or labels for more detail.
• If the label is critical to task completion – don’t hide it in a tag, use a clear inline label.

---

Best Practices

• Keep tag text short and scannable – ideally a single word.
• Use semantic colors consistently (neutral, informative, success, warning, danger) to indicate meaning.
• Choose subtle variants for less emphasis and default variants when stronger emphasis is needed.
• Select a tag size appropriate to the context, but avoid mixing sizes within the same group.
• Avoid using too many tags in one view – clutter reduces clarity.
• If tags are interactive (e.g., removable or filterable), provide a clear visual affordance (like an “x” icon).
• Place tags close to the content they describe.