There is an update to the GOV.UK Prototype kit which may affect how your prototype works if you are not using the latest version. Contact #team-plat-ui on HMRC Slack (open in app) if you need more information or support.

Notification badge

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

When to use

Use the notification badge when the user needs to be alerted that they have, for example, 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 a notification badge as a part of the navigation.

How it works

The notification badge is a number displayed to the right-hand side of whatever it refers to.

There are 2 ways to use the account header. You can use HTML or, if you are using Nunjucks or version 7 or later of the GOV.UK Prototype Kit, you can use the Nunjucks macro.

You need HMRC Frontend to use this pattern – find out how to install HMRC Frontend. If you use the HMRC Nunjucks macro, you must copy and paste the entire macro in to your code.
            <a class="govuk-link" href="#">Messages <span class="hmrc-notification-badge">32</span>
</a>
          
              {%- from "hmrc/components/notification-badge/macro.njk" import hmrcNotificationBadge -%}

<a class="govuk-link" href="#">Messages {{ hmrcNotificationBadge({ text: '32' }) }}</a>
            

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

If there are 0 things, do not show the badge.

            <a class="govuk-link" href="#">Messages </a>
          
              {%- from "hmrc/components/notification-badge/macro.njk" import hmrcNotificationBadge -%}

<a class="govuk-link" href="#">Messages {{ hmrcNotificationBadge() }}</a>
            

Research

Research showed 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

We need more research. If you have used the notification badge, get in touch to share your research findings.

Discuss the notification badge on GitHub