Context
The Chip component has traditionally been used as a visual text label that helps describe attributes of an object. Throughout the interface, Chips inform users about how an object is tagged or identified and can also enable filtering when available. Typically, Chips act as containers for tag elements and may include icons or a remove/dismiss action when used in dynamic lists.
Problem
While Chips have been very versatile, they often overlap with other UI elements, leading to inconsistencies in design and functionality. The dual purpose of labelling and filtering within a single component can create confusion, particularly when Chips are used alongside other tagging or filtering components. Refer to Distinguishing Between Badges, Chips, and Tags.
This has led to a reconsideration of whether Chips should exist at all.
Proposed Solution
Discontinue the Chip Component:
- Eliminate the Chip component in favor of more specialized components. Instead of using Chips to describe object attributes, consider using distinct elements such as tags, badges and a new dedicated component for "Link" or "Resource" elements. This component would be specifically designed to encapsulate the object being linked to it, like the Project icon stack under the Tenats page, providing a consistent and clear representation.
- For interactive elements that represent filterable or removable items, explore alternative designs like a Tag component.
Develop a New Component:
Consider creating a new, dedicated component for "Link" or "Resource" elements. This component would be specifically designed to encapsulate the object being linked to, providing a consistent and clear representation.
Considerations
- Consistency: The new component should be consistent across the application, replacing the varied uses of Chips, tags and badges with a unified approach.
Next Steps
- Design and Prototype: Begin the design process for the new component, focusing on clarity, usability, and consistency.
- Review and Feedback: Engage with key stakeholders to review the proposed component and gather feedback.
- Implementation: Once finalized, implement the new component across the application, replacing the Chip component where applicable.
This decision simplifies and clarifies the representation of linked objects, providing a more intuitive and consistent user experience.
Related Documentation
Tag
The Tag component is used to represent a category, label, or keyword for easy categorisation and filtering.
Badge
Badges highlight the status or metadata about a corresponding object. They are commonly used to accompany headings or within tables to communicate status.
Distinguishing between Badges, Chips, and Tags
In our UI design, clarity and consistency are essential for creating a user-friendly experience. To achieve this, it's important to correctly differentiate between similar components: Badges, Chips, and Tags. While they may appear similar at first glance, each serves a unique purpose and should be used in specific contexts.