Design Pattern Library: Organize badges in library
Problem
(What’s the problem that this pattern solves? Why is it worth solving?)
Solution
Badges allow showing object meta-data in the form of icons and/or text (words and/or numbers), information which wouldn't be useful on its own, it always needs to be in context.
Other terms that are commonly used to refer to badges: counters, statuses, chips, tags, metadata, lozenges, labels, pills, and bubbles.
Example(s)
See live examples in the product in #138 (comment 105820627)
Usage
- Badges adopt the common “pill” design.
- Badges should always be linked to the object they refer to, unless the user is already seeing the most detailed state of that object (e.g. in the object's detail page).
- By default, badges adopt the “secondary neutral” variation. They can be prioritized over other surrounding elements by using the “primary neutral” variation.
- Depending on the context and significance of the badge, some part of or all of its text can be bolded.
- If the data represented by the badge is related success, information, warning, or danger, it can adopt a more colorful state. This visual treatment should be used with care and as a last resort for highlighting badges.
Dos and dont's
(Use this table to add images and text describing what’s ok and not ok.)
|
|
|
|---|---|
Related patterns
(List any related or similar solutions. If none, write: No related patterns)
Links / references
- Material Design: Chips
- Lightning Design System: Badges
- Ant Design: Tags and Badges
- Atlassian Design: Badges, Tags, and Lozenges
- HubSpot Canvas: Tags/Labels
- Clarity: Labels
- Heroku Purple: Badges
- MongoDB Design: Bubbles
- Shopify Polaris: Badges and Tags
- QuickBooks: Numeric badges and Status badges
- Trello Nachos: Labels
- GitHub: Labels
- Lonely Planet Rizzo: Badges
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Ensure that you have broken things down into atoms, molecules, and organisms. -
Check that you have not created a duplicate of an existing pattern. -
Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Make sure that typography is using text styles. When applicable used shared styles for colors. -
QA check by another UXer -
Add changes to the pattern library -
Create an issue to add the pattern documentation to the Design System. Mark it as related to this issue. -
Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)
Original description
We currently have a few symbols that fall under the category of 'badges'. We should look into their naming and organization in the library, as well as which of them can be combined.
| Symbol | Design |
|---|---|
global-components/other/badge-count |
 |
global-components/other/badge-count--active |
 |
global-components/other/badge-count__sidebar--active |
 |
global-components/other/badge-count--tip |
 |
global-components/badges/status-badges/success (etc.) |
 |
topbar/atoms/badge-count |
 |
global-components/badges/other/icon |
 |
global-components/badges/other/text |
 |
global-components/other/tag |
 |