In designing our UI components, it's important to distinguish between Badges, Chips, and Tags, as each serves a distinct purpose:
- Badge:
- Purpose: Displays a small amount of text or an icon, such as notification counts or message indicators. Typically one use per element.
- Tooltip: Badges should not support tooltips directly. If a tooltip is needed, it should be applied to the parent element containing the Badge.
- Chip:
- Purpose: Represents an object that can be linked to, typically used for items like projects, or resources.
- Usage Note: We recommend avoiding the use of Chips. Instead, use a more appropriate object representation, such as the Project icon component. We may need to develop a new component that standardizes the way “Link” or “Resource” components are constructed, ensuring consistency and clarity.
- Tag:
- Purpose: Represents a category, label, or keyword, often used for categorization and filtering.
- Tooltip: Tags may include tooltips, particularly when text is truncated with ellipses, to display the full content on hover.
This distinction helps in ensuring each component is used appropriately, providing clarity in design and enhancing the user experience.