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

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 into your code.

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

Open this example in a new tab Display in English Display in Welsh

HTML
Nunjucks

              <a class="govuk-link" href="#">Messages <span class="hmrc-notification-badge">32</span>
</a>

                <a class="govuk-link" href="#">Negeseuon <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>

                  {%- from "hmrc/components/notification-badge/macro.njk" import hmrcNotificationBadge -%}

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

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

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

Open this example in a new tab Display in English Display in Welsh

HTML
Nunjucks

              <a class="govuk-link" href="#">Messages </a>

                <a class="govuk-link" href="#">Negeseuon </a>

                {%- from "hmrc/components/notification-badge/macro.njk" import hmrcNotificationBadge -%}

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

                  {%- from "hmrc/components/notification-badge/macro.njk" import hmrcNotificationBadge -%}

<a class="govuk-link" href="#">Negeseuon {{ 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