Context
The Badge component is designed to display a small, unobtrusive label or icon, typically used for indicating notifications, message counts, or other brief status indicators. Badges are generally used alongside other elements to provide additional context or information.
Problem
While Badges are effective for categorization, their usage can sometimes overlap with other components like Tags or Chips, leading to potential confusion in the interface. It's important to clearly distinguish when and how Badges should be used to ensure consistency and clarity.
Refer to Distinguishing between Badges, Chips and Tags for further information.
Proposed Solution
- Content Limitation:
- Badges should contain minimal text, such as single or three-digit numbers or simple icons.
- Content: Accepts either text (e.g., "1", "999+") or an icon.
- Placement:
- The Badge should be placed adjacent to the element it annotates, such as a button or an avatar.
- Considerations:
- Tooltip Application:
- Badges are intended for simple text or icon displays and do not directly support tooltips. Apply tooltips to the elements the badge is attached to rather than the Badge itself.
Next Steps
- Review and Feedback: Ensure the Badge component’s usage is understood and applied correctly. Clarify the distinctions between Badges, Tags, and Chips.
- Implementation: Update the design and documentation to reflect these distinctions and ensure consistent application across the UI.
This decision ensures that the Badge component is used appropriately for its intended purpose while clarifying its role concerning other components like Tags and Chips.
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.