Notification banner
Use a notification banner to tell the user something they need to know about, but that’s not directly related to the page content.
When to use this component
A notification banner lets you tell the user about something that’s not directly relevant to the thing they’re trying to do on that page. For example:
telling the user about a problem that’s affecting the service as a whole (for example, delays in processing applications because of an emergency)
telling the user about something that affects them in particular (for example, an approaching deadline they need to meet)
telling the user about the outcome of something they’ve just done on a previous page (for example, confirming that an email has been sent)
When not to use this component
Use notification banners sparingly. There’s evidence that people often miss them, and using them too often is likely to make this problem worse.
If the information is directly relevant to the thing the user is doing on that page, put the information in the main page content instead. If the information needs to stand out, consider using:
inset text, if the information is supplementary to the content on the page
warning text, if you need to highlight something that has serious consequences - for example, if the user will be fined for not doing something before a certain deadline
Do not:
use a notification banner to tell the user about validation errors - use an error message and error summary instead
show a notification banner and an error summary on the same page - just show the error summary
How it works
Position a notification banner immediately before the page h1. The notification banner should be the same width as the page’s other content, such as components, headings and body text. For example, if the other content takes up two-thirds of the screen on desktop devices, then the notification banner should also take up two-thirds.
Use role="region" and aria-labelledby="govuk-notification-banner-title" (with id="govuk-notification-banner-title" on <govuk-notification-banner__title>) so that screen reader users can navigate to the notification banner.
Avoid showing more than one notification banner on the same page. Instead, combine the messages in a single notification banner. If the messages are too different to combine, only show the highest priority notification banner.
Notification banner headings
You can use <h3> headings in the govuk-notification-banner__content to help structure your content.
Avoid using headings for single-line notifications that do not need them.
Telling the user about a problem that affects the whole service
Use a ‘neutral’ blue notification banner if the user needs to know about a problem with the service as a whole.
For example:
in a service that lets the user register or apply for something, they might need to know that it’s taking longer than usual to process applications because of an emergency
in an account-type service, the user might need to know that the service will be down for scheduled maintenance
Get the Nunjucks macro for this example from the Camden Frontend library
Telling the user about something that’s happening elsewhere
Use a ‘neutral’ blue notification banner if the user needs to know about something that’s happening elsewhere in the service. For example:
in an admin system, the user might need to know that there are new tasks waiting for their attention
in an account-type service, you might need to tell the user that there’s a deadline approaching or that a payment is overdue
Get the Nunjucks macro for this example from the Camden Frontend library
Reacting to something the user has done
You can also use a notification banner to tell the user about the outcome of something they’ve just done.
Using a notification banner is unlikely to be the right approach in a linear service, for example, a service that lets the user register or apply for a thing. For a linear service, it will usually make sense to stick to the ‘one thing per page’ approach. Do not use a notification banner to tell users that they’ve finished using a linear service. Use a confirmation page instead.
Use the green version of the notification banner to confirm that something they’re expecting to happen has happened.
Get the Nunjucks macro for this example from the Camden Frontend library
Since you’re using the notification banner to tell the user about the outcome of something they’ve just done, add role="alert" so focus shifts to the notification banner on page load.
Remove a green notification banner when the user moves to a new page.
To make the green version of the notification banner accessible:
use headings like ‘Success’ - so that you’re not relying on colour alone to convey meaning)
use the same heading for green notification banners within the same service - so that you’re identifying components that work in the same way consistently
Research on this component
This component is based on the notification banner component from the GOV.UK Design System.
You can take part in the ‘Notification banner' discussion on GOV.UK’s Design System’s GitHub and share your research.