Tag

Context

The Tag component is designed to represent a category, label, or keyword, making it easier for users to categorize and filter items within the interface. Tags can be static or interactive, depending on the use case.

Problem

While Tags are effective for categorisation, their usage can sometimes overlap with other components like Badges or Chips, leading to potential confusion in the interface. It's important to clearly distinguish when and how Tags should be used to ensure consistency and clarity.

Refer to Distinguishing between Badges, Chips and Tags for further information.

Proposed Solution

• Category Representation:
• Use the Tag component to visually indicate the category or classification of an item. This helps users quickly identify and filter content based on relevant categories.
• Interactive or Static:
• Tags can be either clickable for actions like filtering or static for display purposes only. Determine the appropriate behaviour based on the context in which the Tag is used.
• Tooltip Support:
• If the Tag text is truncated with ellipses due to length, add a tooltip to display the full text on hover. This ensures that users can access the complete information even when space is limited.

Considerations

• Consistency: Ensure that Tags are used consistently across the application to represent categories or keywords, avoiding overlap with Badges or other similar components.

Next Steps

• Review and Feedback: Ensure that the Tag component is being used appropriately in current designs.
• Implementation: Where necessary, adjust the usage of Tags to align with the new guidelines, ensuring that Tags, Badges, and any new components are clearly differentiated.

Related Documentation