Components

Notification banner

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.

Important

You have 7 days left to send your application. View application.

<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>

Success banner

Use 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 role="alert", but the auto-focus will be disabled for any other role.

Success

Training outcome recorded and trainee withdrawn

Contact example@department.gov.uk if you think there’s a problem.

<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="#">example@department.gov.uk</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.

Important

There may be a delay in processing your application because of the coronavirus outbreak.

<gv-notification-banner text="There may be a delay in processing your application because of the coronavirus outbreak." />

Props

Name	Type	Description
text	string	The text that displays in the notification banner. If content is provided in the default slot, this prop will be ignored.
type	string	The type of notification to render. You can only use success with this option. If you set type to success, the notification banner sets role to alert and keyboard focus will move to the banner when it's mounted (unless you set disableAutoFocus). If you do not set type, the notification banner sets role to region. Allowed values: success.
title	string	The title text that displays in the notification banner. If you don't set a title, it will default to Success if type is success or Important if you don't set a type.
titleHeadingLevel	number	Sets heading level for the title only, from 1 to 6. Defaults to 2.
titleId	string	The id for the banner title, and the aria-labelledby attribute in the banner. If you don't provide an ID, one will be generated automatically.
role	string	Overrides the value of the role attribute for the notification banner. Defaults to region. If you set type to success, role defaults to alert.
disableAutoFocus	boolean	If true, keyboard focus will not be moved to the banner when it's mounted, even if you've set type to success or role to alert. Defaults to false.

Slots

Name	Description
title	The title that displays in the notification banner. If content is provided in this slot, the title prop will be ignored.
default	The content that displays in the notification banner. If content is provided in this slot, the text prop will be ignored.