Badge
A Badge is a small visual element used to highlight information, such as notifications or status indicators, enhancing user awareness within the interface.
- Overview
- Specs
- Guidelines
Component
The Badge component is a visual element used in user interfaces to highlight and provide supplementary information about an item, such as a notification count. Typically small and unobtrusive, Badges are often displayed as circular or rounded rectangular shapes containing brief text or icons.
They serve to draw attention to important updates, alerts, or categories, enhancing user awareness and engagement within 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 that registry, they can be used on buttons;
Tabs
As is the case with notifications case, Badges serve 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 fresh 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 truly 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;
Demo
Access the Figma file and inspect the element using Dev Mode.
What’s New?
- Added 1 to 99 variation;
- Added disabled state;
Related
Variations
Only Dot
Enabled
.enabled {
height: 8px;
width: 8px;
corner-radius: var(--rounded);
background-color: var(--error-100);
color: var(--grey-1);
}1 to 99
Enabled
.enabled {
height: 22px;
corner-radius: var(--rounded);
background-color: var(--error-100);
color: var(--grey-1);
}Disabled
.disabled {
height: 22px;
corner-radius: var(--rounded);
background-color: var(--grey-6);
color: var(--grey-4);
}99+
Enabled
.enabled {
height: 22px;
corner-radius: var(--rounded);
background-color: var(--error-100);
color: var(--grey-1);
text: "99+";
}Disabled
.disabled {
height: 22px;
corner-radius: var(--rounded);
background-color: var(--grey-6);
color: var(--grey-4);
text: "99+";
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Behavior
Variations
Depending on the situation, certain variations are recommended. In the case of tabs, Badges will only be applied with the Only Dot variation in order to maintain the user focus within the page.
In the cases of buttons where counters can be applied, these tend to have numbers between 1 and 99, which are the numbers we support in our Badge. For cases where the user has more than 99 system notifications/messages, the 99+ variation is used, and the number cannot be changed.
Use the state to follow the current status of the applied component.
Apply a number greater than 99 in the 1 to 99 variation.
Related
