|
1 | 1 | --- |
2 | 2 | title: Notification badge |
3 | | -status: To be reviewed |
4 | | -statusDate: June 2021 |
| 3 | +tabs: true |
| 4 | +status: Official |
| 5 | +statusDate: October 2025 |
5 | 6 | githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/706 |
6 | | -excerpt: "The notification badge lets the user know that there is new information to view, like unread messages, and how many of them there are." |
| 7 | +excerpt: "Use the notification badge to display an amount of new or unread items." |
| 8 | +lede: "Use the notification badge to display an amount of new or unread items." |
7 | 9 | --- |
| 10 | +{% from "govuk/components/pagination/macro.njk" import govukPagination %} |
8 | 11 |
|
9 | | -{% example template="/examples/notification-badge", height=125 %} |
| 12 | +{% tabs "paginate" %} |
| 13 | +{% tab "Overview" %} |
10 | 14 |
|
11 | | -## When to use |
| 15 | +{% example template="/examples/notification-badge", height=81 %} |
12 | 16 |
|
13 | | -The notification badge lets the user know that there is new information to view, like unread messages, and how many of them there are. |
| 17 | +## Overview |
14 | 18 |
|
15 | | -Only use it if the number changes when the user performs an action. |
| 19 | +The notification badge component shows users that there are items in a service that need their attention. |
16 | 20 |
|
17 | | -## When not to use |
| 21 | +It displays the number of items, and needs to be added to a link. |
18 | 22 |
|
19 | | -Do not use the notification badge when: |
| 23 | +### When to use |
20 | 24 |
|
21 | | -- the number of things is 0 |
22 | | -- there is no action |
| 25 | +You could use the notification badge to tell a user about a: |
| 26 | +- new case, referral or application |
| 27 | +- change to an appointment or booking, for example a cancellation |
| 28 | +- new or unread message |
23 | 29 |
|
24 | | -Unless there is a strong user need, only use it as a part of the navigation. |
| 30 | +This component is best used in a navigation link but may be OK in some other parts of a service. |
| 31 | + |
| 32 | +#### An example of the notification badge showing 3 case updates in the [primary navigation](/components/primary-navigation): |
| 33 | + |
| 34 | +<p><img src="{{ 'assets/images/notification-badge-example-count.png' | rev | url }}" alt="A red notification badge sits next to the active 'Cases' link in the primary navigation. A white number 3 sits inside the round badge. The page shows a table of cases. The first 3 rows have a status of 'To be reviewed'."></p> |
| 35 | + |
| 36 | +### When not to use |
| 37 | + |
| 38 | +Research will help you work out when the notification badge should be used. |
| 39 | + |
| 40 | +Do not use this component: |
| 41 | +- for a standard list of tasks before a linear journey, use the [GOV.UK completing multiple tasks pattern](https://design-system.service.gov.uk/patterns/complete-multiple-tasks/) instead |
| 42 | +- to just display a 'count' if there’s nothing for the user to do or know |
| 43 | + |
| 44 | +To display a count, add the number in plain text next to the item. Putting the number in brackets may be clearer, especially if the title includes a number. |
| 45 | + |
| 46 | +### Things to consider |
| 47 | + |
| 48 | +Some internal users are logged in to a service for most of the day. If they work through items in a service as a main part of their job, the notification badge may not help them. |
| 49 | + |
| 50 | +Consider also whether the component would be a good experience for people who will not usually be able to clear items, for example because they’re very busy. |
| 51 | + |
| 52 | +### Similar or linked components |
| 53 | + |
| 54 | +There’s also the: |
| 55 | + |
| 56 | +- [GOV.UK notification banner](https://design-system.service.gov.uk/components/notification-banner/) |
| 57 | +- [GOV.UK tag](https://design-system.service.gov.uk/components/tag/) |
| 58 | +- [MoJ alert](/components/alert/) |
| 59 | +- [MoJ badge](/components/badge/) |
| 60 | + |
| 61 | +<p></p> |
| 62 | + |
| 63 | +{% endtab %} |
| 64 | + |
| 65 | +{% tab "How to use" %} |
25 | 66 |
|
26 | 67 | ## How to use |
27 | 68 |
|
28 | | -Display the notification badge to the right-hand side of the information it refers to. |
| 69 | +Use the notification badge sparingly to reduce visual clutter, especially in complex interfaces. |
| 70 | + |
| 71 | +### In navigation |
| 72 | + |
| 73 | +The notification badge is best used in a navigation. In that position it: |
| 74 | + |
| 75 | +- can be reliably detected by screen reader users |
| 76 | +- is most prominent for sighted users |
| 77 | + |
| 78 | +Reserving the component for the navigation (and not using it elsewhere) is the most useful and accessible for everyone. This is because it’s being used consistently. |
| 79 | + |
| 80 | +You can view [how to use the notification badge in navigation](/components/notification-badge/#examples-tab). |
| 81 | + |
| 82 | +### In page headers |
| 83 | + |
| 84 | +The notification badge can be placed in a header if the colour contrast is accessible. It's accessible when used with the [MoJ header](/components/header/), but not the [GOV.UK header](https://design-system.service.gov.uk/components/header/). Do not change the component or header colour to make this possible. |
| 85 | + |
| 86 | +If your users are switching between MoJ and GOV.UK services consider whether seeing the component being used in different ways will be confusing. |
| 87 | + |
| 88 | +### Colour and shape |
| 89 | + |
| 90 | +The notification badge colour and shape should not be changed. |
| 91 | + |
| 92 | +Red circles are commonly used to attract attention, and as a way of alerting or notifying a user in a service. |
| 93 | + |
| 94 | +You can use this component on backgrounds other than white if the colour contrast is accessible. |
| 95 | + |
| 96 | +### Link text |
| 97 | + |
| 98 | +#### Position of the component |
| 99 | + |
| 100 | +The notification badge goes on the right of the link that the items relate to, in the same container: |
| 101 | + |
| 102 | +{% example template="/examples/notification-badge-link", height=81, showTab="html" %} |
| 103 | + |
| 104 | +Put the code `<span class="moj-notification-badge">` after the link text, on the same line. Do not add a space between them. This will keep the formatting correct. |
| 105 | + |
| 106 | +#### Content |
| 107 | + |
| 108 | +Label the link text clearly so that the user knows what the item is. You may need to reorganise your tabs to do this. |
| 109 | + |
| 110 | +Consider the following for link text: |
| 111 | + |
| 112 | +- 'Tasks', 'My tasks' or 'To do' for lower priority items |
| 113 | +- 'Notifications' for a range of items |
| 114 | +- an envelope icon for messages |
| 115 | +- 'Alerts' to give flexibility for a range of medium to high-importance items (but not in HMPPS) |
| 116 | + |
| 117 | +<div class="govuk-inset-text"> |
| 118 | + <a href="/content-standards/style-guide/#alerts-(dps-only)">'Alert' has a specific meaning in DPS</a> and HMPPS. Only use this link text in HMPPS if you're referring to an alert produced by NOMIS, DPS or NDelius. |
| 119 | +</div> |
| 120 | + |
| 121 | +#### In this example, the user can view notifications from the [primary navigation](/components/primary-navigation/): |
| 122 | + |
| 123 | +<p><img src="{{ 'assets/images/notification-badge-example-inbox-1.png' | rev | url }}" alt="A red notification badge sits next to the ‘Notifications’ link in the primary navigation. A white number 8 sits inside the round badge. (The ‘Home’ link is active and shows a heading with empty card components.)"></p> |
| 124 | + |
| 125 | +#### Hidden text |
| 126 | + |
| 127 | +You need to 'pass' (add) visually hidden text to the code to help non-sighted users understand what the notification badge number is for. |
| 128 | + |
| 129 | +In the example, the hidden text is 'unread': |
| 130 | + |
| 131 | +```html |
| 132 | +<a href="">Messages |
| 133 | + <span class="moj-notification-badge">5<span class="govuk-visually-hidden">unread</span> |
| 134 | + </span> |
| 135 | +</a> |
| 136 | +``` |
| 137 | + |
| 138 | +### The component number |
| 139 | + |
| 140 | +#### When the number changes |
| 141 | + |
| 142 | +The notification badge number will only update when the page loads. It’s not 'dynamic'. If you want to change this, you’ll need to consider accessibility. |
| 143 | + |
| 144 | +If an item is cleared by an interaction in the service, help the user know that this has happened. Do not rely on the badge changing numbers. |
| 145 | + |
| 146 | +You can view an [example of how to design the onward journey](#examples-tab). |
| 147 | + |
| 148 | +#### Displaying the number of items |
| 149 | + |
| 150 | +The notification badge will either display: |
| 151 | + |
| 152 | +- the number of tasks if there are 98 or less items |
| 153 | +- 99+ if there are 99 or more items |
| 154 | + |
| 155 | +#### Displaying no items |
| 156 | + |
| 157 | +The notification badge will not show unless there are items. You may want to add an empty state to the relevant section to: |
| 158 | + |
| 159 | +- confirm that there are no items (and reassure the user that the page has loaded correctly) |
| 160 | +- help people understand where they'll usually find items (which is helpful for a new service or for new users) |
| 161 | + |
| 162 | +Example of the notification badge when there are no items: |
| 163 | + |
| 164 | +{% example template="/examples/notification-badge-no-items", height=81, showTab="nunjucks" %} |
| 165 | + |
| 166 | +### Using other notifications |
| 167 | + |
| 168 | +The notification badge is only shown when a user is logged in and viewing the service in a browser. |
| 169 | + |
| 170 | +This means you may need to send a notification (for example an email) if either: |
| 171 | +- the task is urgent or important |
| 172 | +- some users do not log in very often |
| 173 | + |
| 174 | +Carry out research to find out if this will be helpful. |
| 175 | + |
| 176 | +{% endtab %} |
| 177 | + |
| 178 | +{% tab "Examples" %} |
| 179 | + |
| 180 | +## Examples |
| 181 | + |
| 182 | +### The onward journey |
| 183 | + |
| 184 | +The notification badge shows a user where the items are. The items should be easy to find once the user has selected the link. |
| 185 | + |
| 186 | +#### Step 1: The user sees that they have 8 notifications |
| 187 | + |
| 188 | +<p><img src="{{ 'assets/images/notification-badge-example-inbox-1.png' | rev | url }}" alt="A red notification badge sits next to the 'Notifications' link in the primary navigation. A white number 8 sits inside the round badge. (The 'Home' link is active and shows a heading with empty card components.)"></p> |
| 189 | + |
| 190 | +#### Step 2: They select the link to view their notifications |
| 191 | + |
| 192 | +<p><img src="{{ 'assets/images/notification-badge-example-inbox-2.png' | rev | url }}" alt="The 'Notifications' link is active. The notification badge with the number 8 is part of the active link. The page shows a table with 8 new notifications. The last three rows of the table are selected and there is a 'Mark selected as read' button and a 'Clear selection' link."></p> |
| 193 | + |
| 194 | +More meaningful information is given about the item using a [GOV.UK tag](https://design-system.service.gov.uk/components/tag/). |
| 195 | + |
| 196 | +You could also use the [badge component](/components/badge/), or a section called 'Tasks'. Do not use the notification badge again within a section. |
| 197 | + |
| 198 | +The user selects 3 and then 'Mark selected as read'. |
| 199 | + |
| 200 | +#### Step 3: They receive feedback that 3 messages have been marked as read. The number on the notification badge changes from 8 to 5. |
| 201 | + |
| 202 | +<p><img src="{{ 'assets/images/notification-badge-example-inbox-3.png' | rev | url }}" alt="The 'Notifications' page has changed: A success message confirms that 3 notifications have been marked as read. The notification badge number is updated to 5 and the table shows 5 remaining notifications."></p> |
| 203 | + |
| 204 | +The number has changed because the page loaded. It’s not 'dynamic'. |
| 205 | + |
| 206 | +### In MoJ primary navigation |
| 207 | + |
| 208 | +{% example template="/examples/notification-badge-primary-nav", height=590 %} |
| 209 | + |
| 210 | +### In MoJ side navigation |
| 211 | + |
| 212 | +{% example template="/examples/notification-badge-side-nav", height=590 %} |
| 213 | + |
| 214 | +### In MoJ sub navigation |
| 215 | + |
| 216 | +{% example template="/examples/notification-badge-sub-nav", height=590 %} |
| 217 | + |
| 218 | +### In GOV.UK tabs |
| 219 | + |
| 220 | +{% example template="/examples/notification-badge-tabs", height=590 %} |
| 221 | + |
| 222 | +### In GOV.UK service navigation |
| 223 | + |
| 224 | +{% example template="/examples/notification-badge-service-nav", height=590 %} |
29 | 225 |
|
30 | | -If the number is more than 99, display ‘99+’. |
| 226 | +### In MoJ header |
31 | 227 |
|
32 | | -## Research |
| 228 | +{% example template="/examples/notification-badge-header", height=590 %} |
33 | 229 |
|
34 | | -Research shows that notification badges are common across online services, smartphones and apps. Usability testing showed: |
| 230 | +{% endtab %} |
35 | 231 |
|
36 | | -- users understand what it is for |
37 | | -- it does not distract users from their task |
| 232 | +{% tab "Get help and contribute" %} |
| 233 | +{% include "layouts/partials/get-help-and-contribute.njk" %} |
| 234 | +{% endtab %} |
| 235 | +{% endtabs %} |
0 commit comments