💠 Badge

Visual indicator for states or numeric values such as tallies and scores.

Usage

The Badge component serves as a visual indicator for numeric values and states, such as tallies, scores, or status labels. They are often used to draw attention to new or important information, like unread messages, or to categorize items using color-coded labels.

Badges should be clear and legible, providing immediate understanding of the information they convey.

When to use

• Status indication: Use Badges to indicate the status of an item, such as "active," "pending," or "completed."
• Notification alerts: Employ Badges to alert users to new information or updates, such as unread messages or notifications.
• Quantitative counts: Utilize Badges to display counts for items like emails, errors, or shopping cart items.

Avoid using Badges for detailed information that requires more context; instead, use a tooltip or another method that allows for more explanation. Do not overuse Badges, as too many can clutter the interface and dilute their impact.

Examples

Default

Brand

Danger

Warning

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager: