Tags help users quickly recognize and filter content by specific attributes. While visually similar to Badges and Chips, Tags are specifically intended for categorization and possess low-level interactivity (navigation or removal).
Anatomy
The Tag component is comprised of four main elements:
- Container: Rounded container with specific background or border tokens.
- Leading Icon (Optional): Provides additional visual context (e.g., the Bookmark icon).
- Label: Clear, concise text describing the category.
- Dismiss Icon (Optional): An "X" icon used specifically for removable tags.
Interactivity & Behavior
Tags have low interactivity focusing mainly on navigational links and dismissibility. Interactions rules:
- Static: Displayed as read-only metadata.
- Link: The entire tag acts as a hyperlink, navigating the user to a categorized view.
- Dismissible: The tag contains a trailing "X" button. Clicking this removes the tag from the view (common in filter patterns).
- Note: Tags do not support "Selected" or "Active" toggle states. For multi-select behaviors, use Chips.
The click area of the dismissible action is a square based on the height of the component. There are 4 main state for the dismissible action:
- Default
- Hover
- Focus
- Disabled
Usage
- Metadata: To label content with specific attributes (e.g., "Draft", "Internal", "Energy").
- Categorization: To group items under a specific taxonomy (e.g., "Project Type A").
- Removable Filters: To represent active filters that can be dismissed.
- Navigation: When the tag acts as a link to a filtered category page.
- System Status: Use the status indicator component for non-interactive status indicators like "Validated" or "In Progress."
- High Interactivity: Use a Chip if the element needs to function as a toggle, a radio selection, or a complex action button.
- Counters: Use a Callout/Counter for unread notifications or numeric indicators on icons.