Badge

Overview
Specs
Guidelines

Component

A Badge is a visual element used in user interfaces to highlight and provide supplementary information about an item, such as a notification count. Usually small and discreet, Badges are often displayed as circular or rounded rectangular shapes with brief text or icons.

They serve to draw attention to important updates, alerts, or categories, enhancing user awareness and engagement with the interface.

A: Only Dot Variation
B: 1 to 99 Variation
C: 99+ Variation
1: Badge Background
2: Badge Number

Used for:

Notifications

Badges are useful for indicating unread messages, notifications, or updates, providing users with timely information without disrupting their workflow;

Buttons

Badges can also serve as counters, and, in this context, can be used on buttons;

Tabs

As with notifications, Badges are used to indicate notifications or updates in the related tab;

Dynamic content

Badges are ideal for displaying dynamic content, such as real-time updates, user-generated activity, or personalized recommendations, keeping users informed and engaged with brand new content;

Don’t use for:

Irrelevant information

If the Badge does not provide meaningful or relevant information to the user, its presence may unnecessarily confuse or distract users;

Overuse

Using Badges excessively can diminish their effectiveness and lead to user fatigue. Reserve Badges for really important or actionable items to maintain their impact;

Inconsistency

Inconsistent use of Badges or ambiguity in their meaning can confuse users and undermine their utility. Ensure that Badges are used consistently and clearly communicate their purpose;

Redundant information

If the information conveyed by the Badge is already communicated clearly through other means, such as text labels or visual cues, adding a Badge may be redundant and unnecessary;