Notification badges
The guideline content on this page is synced with Figma and can be used as a source of truth.
Open in Figma
This component shows notifications, counts and status.
Anatomy
Number
Use for notification indicators.
- Container
- Number
Dot
Use for notification indicators.
- Container
Muted
This badge is ideal for numerical indicators or status markers.
- Container
- Number
Usage
We use the notification component to provide quick, non-intrusive visual indicators for notifications, counts, or status updates.
Notifications are small, typically circular elements that are placed over or near an interactive element (like an icon or avatar). They serve to alert the user to new activity without interrupting their workflow.
Types
- Dot Badge: Ideal for general notifications or when indicating that a user's status is online. A notification dot badge is temporary and disappears when all notifications are read.
- Number Badge: Essential for highly actionable areas like an inbox, a cart summary, or a direct message count, where the precise number is critical for the user to prioritise their actions.
- Muted Badge: Best for showing a low-priority status, such as an item being in a draft state, or for marking content as "New" without demanding immediate user attention. It confirms a status change without the urgency of the standard (typically red) Number or Dot badge.
Label text
- Muted badge: The maximum number of characters within a muted badge label is four, including a
+to indicate more. - Number badge: The maximum number of characters within a number badge is three, including a
+to indicate more.
Dot notification states
We use four different types of Dot Badges: Default, Success, Warning, and Info. The purpose of these variations is to communicate the status or criticality of the notification instantly through colour, making the information easy for the user to process at a glance.
Best practices
Truncate badge labels with a "+" as needed.
Ensure the badge is not cut off or overlapping (colliding with) any other elements.
Specs
Developer reference
The following sections describe supported functionality that is not part of the Figma design specification.
The position of the dot badge can be changed using the top/bottom/left/right helper classes.
Number colour variants
In addition to the Figma Enabled, Default, and Disabled states, the number badge ships supportive colour variants for use as in-context count badges (for example inside buttons, pills, and list groups).
More examples
Default top navigation
