Use a notification banner to tell the user about something they need to know about, but that’s not directly related to the page content.
See the GOV.UK Design System documentation on notification banners for more information on when to use this component.
<gv-notification-banner> <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> </gv-notification-banner>
type="success" to show a green 'success' banner. Use this version to confirm that something the user is expecting
to happen has happened.
By default, the success banner will be auto-focussed when it's mounted. You can disable this by setting
:disable-auto-focus="true". You can also set
role="region" - the default for success banners is
but the auto-focus will be disabled for any other role.
<gv-notification-banner type="success" :disable-auto-focus="true"> <h3 class="govuk-notification-banner__heading"> Training outcome recorded and trainee withdrawn </h3> <p class="govuk-body">Contact <a class="govuk-notification-banner__link" href="#">email@example.com</a> if you think there’s a problem.</p> </gv-notification-banner>
Providing the banner content
You can either use the
text prop or the default slot to provide content to show in the banner.
If you use the prop, the content will automatically be wrapped in a
<p class="govuk-notification-banner__heading">, which will apply the
correct paragraph styling. If you use the slot, you'll need to wrap your paragraphs manually.
<gv-notification-banner text="There may be a delay in processing your application because of the coronavirus outbreak." />
The text that displays in the notification banner. If content is provided in the default slot, this prop will be ignored.
The type of notification to render. You can only use
The title text that displays in the notification banner. If you don't set a title, it will default to
Sets heading level for the title only, from
Overrides the value of the
The title that displays in the notification banner. If content is provided in this slot, the
The content that displays in the notification banner. If content is provided in this slot, the