<divclass="govuk-notification-banner__header"><h2class="govuk-notification-banner__title"id="govuk-notification-banner-title">
Important
</h2></div><divclass="govuk-notification-banner__content"><pclass="govuk-notification-banner__heading">
You have 7 days left to send your application.
<aclass="govuk-notification-banner__link"href="#">View application</a>.
</p></div></div>
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-default-notification-banner-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
The text that displays in the notification banner. You can use any string with this option. If you set <code>html</code>, this option is not required and is ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
The HTML to use within the notification banner. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">caller</th>
<td class="govuk-table__cell ">nunjucks-block</td>
<td class="govuk-table__cell ">
Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire notification banner component in a <code>call</code> block.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are 'Important', 'Success', and null:<ul>
if you do not set type, titleText defaults to 'Important'
if you set type to success, titleText defaults to 'Success'
if you set titleHtml, this option is ignored
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set <code>titleHtml</code>, the <code>titleText</code> option is ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleHeadingLevel</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Sets heading level for the title only. You can only use values between <code>1</code> and <code>6</code> with this option. The default is <code>2</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">type</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The type of notification to render. You can use only the <code>success</code> or null values with this option. If you set <code>type</code> to <code>success</code>, the notification banner sets <code>role</code> to <code>alert</code>. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set <code>type</code>, the notification banner sets <code>role</code> to <code>region</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">role</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Overrides the value of the <code>role</code> attribute for the notification banner. Defaults to <code>region</code>. If you set <code>type</code> to <code>success</code>, <code>role</code> defaults to <code>alert</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleId</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The <code>id</code> for the banner title, and the <code>aria-labelledby</code> attribute in the banner. Defaults to <code>govuk-notification-banner-title</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">disableAutoFocus</th>
<td class="govuk-table__cell ">boolean</td>
<td class="govuk-table__cell ">
If you set <code>type</code> to <code>success</code>, or <code>role</code> to <code>alert</code>, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set <code>disableAutoFocus</code> to <code>true</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The classes that you want to add to the notification banner.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
The HTML attributes that you want to add to the notification banner, for example, data attributes.
</td>
</tr>
</tbody>
</table>
{% set html %}
<p class="govuk-notification-banner__heading">
You have 7 days left to send your application.
<a class="govuk-notification-banner__link" href="#">View application</a>.
</p>
{% endset %}
{{ govukNotificationBanner({
html: html
}) }}
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 of the service. 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. Use inset text or warning text if it needs to stand out.
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. Read about how to lay out pages.
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
<divclass="govuk-notification-banner__header"><h2class="govuk-notification-banner__title"id="govuk-notification-banner-title">
Important
</h2></div><divclass="govuk-notification-banner__content"><pclass="govuk-notification-banner__heading">There may be a delay in processing your application because of the coronavirus outbreak.</p></div></div>
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-whole-service-notification-banner-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
The text that displays in the notification banner. You can use any string with this option. If you set <code>html</code>, this option is not required and is ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
The HTML to use within the notification banner. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">caller</th>
<td class="govuk-table__cell ">nunjucks-block</td>
<td class="govuk-table__cell ">
Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire notification banner component in a <code>call</code> block.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are 'Important', 'Success', and null:<ul>
if you do not set type, titleText defaults to 'Important'
if you set type to success, titleText defaults to 'Success'
if you set titleHtml, this option is ignored
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set <code>titleHtml</code>, the <code>titleText</code> option is ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleHeadingLevel</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Sets heading level for the title only. You can only use values between <code>1</code> and <code>6</code> with this option. The default is <code>2</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">type</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The type of notification to render. You can use only the <code>success</code> or null values with this option. If you set <code>type</code> to <code>success</code>, the notification banner sets <code>role</code> to <code>alert</code>. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set <code>type</code>, the notification banner sets <code>role</code> to <code>region</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">role</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Overrides the value of the <code>role</code> attribute for the notification banner. Defaults to <code>region</code>. If you set <code>type</code> to <code>success</code>, <code>role</code> defaults to <code>alert</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleId</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The <code>id</code> for the banner title, and the <code>aria-labelledby</code> attribute in the banner. Defaults to <code>govuk-notification-banner-title</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">disableAutoFocus</th>
<td class="govuk-table__cell ">boolean</td>
<td class="govuk-table__cell ">
If you set <code>type</code> to <code>success</code>, or <code>role</code> to <code>alert</code>, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set <code>disableAutoFocus</code> to <code>true</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The classes that you want to add to the notification banner.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
The HTML attributes that you want to add to the notification banner, for example, data attributes.
</td>
</tr>
</tbody>
</table>
<divclass="govuk-notification-banner__header"><h2class="govuk-notification-banner__title"id="govuk-notification-banner-title">
Important
</h2></div><divclass="govuk-notification-banner__content"><pclass="govuk-notification-banner__heading">
You have 7 days left to send your application.
<aclass="govuk-notification-banner__link"href="#">View application</a>.
</p></div></div>
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-default-notification-banner-second-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
The text that displays in the notification banner. You can use any string with this option. If you set <code>html</code>, this option is not required and is ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
The HTML to use within the notification banner. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">caller</th>
<td class="govuk-table__cell ">nunjucks-block</td>
<td class="govuk-table__cell ">
Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire notification banner component in a <code>call</code> block.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are 'Important', 'Success', and null:<ul>
if you do not set type, titleText defaults to 'Important'
if you set type to success, titleText defaults to 'Success'
if you set titleHtml, this option is ignored
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set <code>titleHtml</code>, the <code>titleText</code> option is ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleHeadingLevel</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Sets heading level for the title only. You can only use values between <code>1</code> and <code>6</code> with this option. The default is <code>2</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">type</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The type of notification to render. You can use only the <code>success</code> or null values with this option. If you set <code>type</code> to <code>success</code>, the notification banner sets <code>role</code> to <code>alert</code>. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set <code>type</code>, the notification banner sets <code>role</code> to <code>region</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">role</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Overrides the value of the <code>role</code> attribute for the notification banner. Defaults to <code>region</code>. If you set <code>type</code> to <code>success</code>, <code>role</code> defaults to <code>alert</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleId</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The <code>id</code> for the banner title, and the <code>aria-labelledby</code> attribute in the banner. Defaults to <code>govuk-notification-banner-title</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">disableAutoFocus</th>
<td class="govuk-table__cell ">boolean</td>
<td class="govuk-table__cell ">
If you set <code>type</code> to <code>success</code>, or <code>role</code> to <code>alert</code>, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set <code>disableAutoFocus</code> to <code>true</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The classes that you want to add to the notification banner.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
The HTML attributes that you want to add to the notification banner, for example, data attributes.
</td>
</tr>
</tbody>
</table>
{% set html %}
<p class="govuk-notification-banner__heading">
You have 7 days left to send your application.
<a class="govuk-notification-banner__link" href="#">View application</a>.
</p>
{% endset %}
{{ govukNotificationBanner({
html: html
}) }}
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 - but they have not finished using the service, so it does not make sense to use a confirmation page.
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.
<divclass="govuk-notification-banner__header"><h2class="govuk-notification-banner__title"id="govuk-notification-banner-title">
Success
</h2></div><divclass="govuk-notification-banner__content"><h3class="govuk-notification-banner__heading">
Training outcome recorded and trainee withdrawn
</h3><pclass="govuk-body">Contact <aclass="govuk-notification-banner__link"href="#">example@department.gov.uk</a> if you think there’s a problem.</p></div></div>
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-success-banner-notification-banner-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
The text that displays in the notification banner. You can use any string with this option. If you set <code>html</code>, this option is not required and is ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
The HTML to use within the notification banner. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">caller</th>
<td class="govuk-table__cell ">nunjucks-block</td>
<td class="govuk-table__cell ">
Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire notification banner component in a <code>call</code> block.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are 'Important', 'Success', and null:<ul>
if you do not set type, titleText defaults to 'Important'
if you set type to success, titleText defaults to 'Success'
if you set titleHtml, this option is ignored
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set <code>titleHtml</code>, the <code>titleText</code> option is ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleHeadingLevel</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Sets heading level for the title only. You can only use values between <code>1</code> and <code>6</code> with this option. The default is <code>2</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">type</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The type of notification to render. You can use only the <code>success</code> or null values with this option. If you set <code>type</code> to <code>success</code>, the notification banner sets <code>role</code> to <code>alert</code>. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set <code>type</code>, the notification banner sets <code>role</code> to <code>region</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">role</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Overrides the value of the <code>role</code> attribute for the notification banner. Defaults to <code>region</code>. If you set <code>type</code> to <code>success</code>, <code>role</code> defaults to <code>alert</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleId</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The <code>id</code> for the banner title, and the <code>aria-labelledby</code> attribute in the banner. Defaults to <code>govuk-notification-banner-title</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">disableAutoFocus</th>
<td class="govuk-table__cell ">boolean</td>
<td class="govuk-table__cell ">
If you set <code>type</code> to <code>success</code>, or <code>role</code> to <code>alert</code>, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set <code>disableAutoFocus</code> to <code>true</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
The classes that you want to add to the notification banner.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
The HTML attributes that you want to add to the notification banner, for example, data attributes.
</td>
</tr>
</tbody>
</table>
{% set html %}
<h3 class="govuk-notification-banner__heading">
Training outcome recorded and trainee withdrawn
</h3>
<pclass="govuk-body">Contact <aclass="govuk-notification-banner__link"href="#">example@department.gov.uk</a> if you think there’s a problem.</p>
{% endset %}
{{ govukNotificationBanner({
html: html,
type: 'success'
}) }}
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:
how common it is for users to miss important information in notification banners (including users of assistive technology, who might skip straight to the h1)
whether it’s sometimes helpful to allow users to dismiss notifications, and how to do this
Help improve this component
To help make sure that this page is useful, relevant and up to date, you can: