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.

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"
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

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

Get help and contribute

Get help

You can contact the MoJ Design System team for help or support using this component.

Help improve this component

The MoJ Design System team would like to hear:

• how you have used this component in your service
• any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the notification badge discussion on GitHub.