Components Notification badge

Important

HMRC Design Patterns has a similar component

Notification badge in HMRC Design Patterns has a similar function and visual design to this component, and includes some guidance on when to use it.

This component is in the GOV.UK Design System community backlog for review.

Last updated: 11 October 2022

Open this example in a new window

<span id="notifications" class="moj-notification-badge">10</span>

{%- from "moj/components/notification-badge/macro.njk" import mojNotificationBadge -%}

{{ mojNotificationBadge({
  text: "10"
}) }}

When to use

The notification badge lets the user know that there is new information to view, like unread messages, and how many of them there are.

Only use it if the number changes when the user performs an action.

When not to use

Do not use the notification badge when:

• the number of things is 0
• there is no action

Unless there is a strong user need, only use it as a part of the navigation.

How to use

Display the notification badge to the right-hand side of the information it refers to.

If the number is more than 99, display ‘99+’.

Research

Research shows that notification badges are common across online services, smartphones and apps. Usability testing showed:

• users understand what it is for
• it does not distract users from their task