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.)

✅ Do	🛑 Don’t

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.

1. Ensure that you have broken things down into atoms, molecules, and organisms.
2. Check that you have not created a duplicate of an existing pattern.
3. Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
4. Make sure that typography is using text styles. When applicable used shared styles for colors.
5. QA check by another UXer
6. Add changes to the pattern library
7. Create an issue to add the pattern documentation to the Design System. Mark it as related to this issue.
8. 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