Notification banner

    Standard

Default

A default notification banner tells the user about something they need to know about.

Important

This publication was withdrawn on 7 March 2014.

Show code
<div
  class="govuk-notification-banner"
  role="region"
  aria-labelledby="govuk-notification-banner-title"
  data-module="govuk-notification-banner"
>
  <div class="govuk-notification-banner__header">
    <h2
      class="govuk-notification-banner__title"
      id="govuk-notification-banner-title"
    >
      Important
    </h2>
  </div>
  <div class="govuk-notification-banner__content">
    <p class="govuk-notification-banner__heading">
      This publication was withdrawn on 7 March 2014.
    </p>
  </div>
</div>
---
import { NotificationBanner, NotificationBannerHeader, NotificationBannerTitle, NotificationBannerContent, NotificationBannerHeading } from "@i-dot-ai-npm/component-library-astro";
---

<NotificationBanner>
  <NotificationBannerHeader>
    <NotificationBannerTitle>Important</NotificationBannerTitle>
  </NotificationBannerHeader>
  <NotificationBannerContent>
    <NotificationBannerHeading>
      This publication was withdrawn on 7 March 2014.
    </NotificationBannerHeading>
  </NotificationBannerContent>
</NotificationBanner>
import { NotificationBanner, NotificationBannerHeader, NotificationBannerTitle, NotificationBannerContent, NotificationBannerHeading } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <NotificationBanner>
      <NotificationBannerHeader>
        <NotificationBannerTitle>Important</NotificationBannerTitle>
      </NotificationBannerHeader>
      <NotificationBannerContent>
        <NotificationBannerHeading>
          This publication was withdrawn on 7 March 2014.
        </NotificationBannerHeading>
      </NotificationBannerContent>
    </NotificationBanner>
  );
}
<script>
  import { NotificationBanner, NotificationBannerHeader, NotificationBannerTitle, NotificationBannerContent, NotificationBannerHeading } from "@i-dot-ai-npm/component-library-svelte";
</script>

<NotificationBanner>
  <NotificationBannerHeader>
    <NotificationBannerTitle>Important</NotificationBannerTitle>
  </NotificationBannerHeader>
  <NotificationBannerContent>
    <NotificationBannerHeading>
      This publication was withdrawn on 7 March 2014.
    </NotificationBannerHeading>
  </NotificationBannerContent>
</NotificationBanner>
import { NotificationBanner, NotificationBannerHeader, NotificationBannerTitle, NotificationBannerContent, NotificationBannerHeading } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <NotificationBanner>
      <NotificationBannerHeader>
        <NotificationBannerTitle>Important</NotificationBannerTitle>
      </NotificationBannerHeader>
      <NotificationBannerContent>
        <NotificationBannerHeading>
          This publication was withdrawn on 7 March 2014.
        </NotificationBannerHeading>
      </NotificationBannerContent>
    </NotificationBanner>
  );
}

Success

Use the success variant to confirm that something the user has done has been successful.

Show code
<div
  class="govuk-notification-banner govuk-notification-banner--success"
  role="alert"
  aria-labelledby="govuk-notification-banner-title-success"
  data-module="govuk-notification-banner"
>
  <div class="govuk-notification-banner__header">
    <h2
      class="govuk-notification-banner__title"
      id="govuk-notification-banner-title-success"
    >
      Success
    </h2>
  </div>
  <div class="govuk-notification-banner__content">
    <p class="govuk-notification-banner__heading">
      Training outcome recorded and trainee withdrawn
    </p>
  </div>
</div>
---
import { NotificationBanner, NotificationBannerHeader, NotificationBannerTitle, NotificationBannerContent, NotificationBannerHeading } from "@i-dot-ai-npm/component-library-astro";
---

<NotificationBanner
  success
  titleId="govuk-notification-banner-title-success"
>
  <NotificationBannerHeader>
    <NotificationBannerTitle id="govuk-notification-banner-title-success">
      Success
    </NotificationBannerTitle>
  </NotificationBannerHeader>
  <NotificationBannerContent>
    <NotificationBannerHeading>
      Training outcome recorded and trainee withdrawn
    </NotificationBannerHeading>
  </NotificationBannerContent>
</NotificationBanner>
import { NotificationBanner, NotificationBannerHeader, NotificationBannerTitle, NotificationBannerContent, NotificationBannerHeading } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <NotificationBanner
      success
      titleId="govuk-notification-banner-title-success"
    >
      <NotificationBannerHeader>
        <NotificationBannerTitle id="govuk-notification-banner-title-success">
          Success
        </NotificationBannerTitle>
      </NotificationBannerHeader>
      <NotificationBannerContent>
        <NotificationBannerHeading>
          Training outcome recorded and trainee withdrawn
        </NotificationBannerHeading>
      </NotificationBannerContent>
    </NotificationBanner>
  );
}
<script>
  import { NotificationBanner, NotificationBannerHeader, NotificationBannerTitle, NotificationBannerContent, NotificationBannerHeading } from "@i-dot-ai-npm/component-library-svelte";
</script>

<NotificationBanner
  success
  titleId="govuk-notification-banner-title-success"
>
  <NotificationBannerHeader>
    <NotificationBannerTitle id="govuk-notification-banner-title-success">
      Success
    </NotificationBannerTitle>
  </NotificationBannerHeader>
  <NotificationBannerContent>
    <NotificationBannerHeading>
      Training outcome recorded and trainee withdrawn
    </NotificationBannerHeading>
  </NotificationBannerContent>
</NotificationBanner>
import { NotificationBanner, NotificationBannerHeader, NotificationBannerTitle, NotificationBannerContent, NotificationBannerHeading } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <NotificationBanner
      success
      titleId="govuk-notification-banner-title-success"
    >
      <NotificationBannerHeader>
        <NotificationBannerTitle id="govuk-notification-banner-title-success">
          Success
        </NotificationBannerTitle>
      </NotificationBannerHeader>
      <NotificationBannerContent>
        <NotificationBannerHeading>
          Training outcome recorded and trainee withdrawn
        </NotificationBannerHeading>
      </NotificationBannerContent>
    </NotificationBanner>
  );
}

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 an Inset text component or Warning text component if it needs to stand out.

Do not: