Skip to main content
Official government website
GovBB Design System
Menu

Status banner

A coloured strip stating where a page sits in its lifecycle.

Examples
HTML and React
Group
Feedback
On this page

Preview

Alpha status banner
Open in new tab

The Status banner component is a coloured strip that tells users where a page sits in its lifecycle: in Alpha or Beta testing, migrated from an older site, or affected by a service disruption. It holds one or two short paragraphs.

It comes in two shapes. The default is an inline block that sits inside the page content column and brings its own padding. For the strip directly below the header, use the full-width shape instead: the background bleeds edge to edge while the text stays aligned with the page content column.

Usage

When to use

  • Use a status banner when a page or service condition changes what users should expect.
  • Use it for a service disruption, moved content or a relevant lifecycle message.

When not to use

  • Do not use it for form validation; use an error summary and inline messages.
  • Do not stack banners or use one for routine content that belongs in the page body.

Best practices

State the impact and next step

Explain what has changed, who is affected and what users can do. Keep the message to one or two sentences and link to detail only when it helps users act.

Match urgency to semantics

Do not rely on colour alone to communicate the variant. The banner is plain static content: screen readers announce it in reading order when it is present at page load. If a script injects the banner after the page has loaded, add role="status" so the change is announced, and reserve an assertive live role for an urgent change that must interrupt the user.

Page-level use

For the one-per-page strip directly below the header, add the govbb-status-banner--full-width modifier and wrap the content in govbb-width-container govbb-status-banner__inner. This is the same full-bleed pattern the official banner, header and footer use: the tinted background spans the viewport and the text lines up with the rest of the page content. Do not wrap the banner in your own container or override its padding.

Full-width status banner
Open in new tab

In React the fullWidth prop adds the modifier and renders the inner width container for you.

Variants

Each variant has its own background colour: --alpha and --beta for pages under test, --migrated for content moved from an older site, and --service for service disruptions.

Status banner variants
Open in new tab

Rounded corners

Add the govbb-status-banner--rounded modifier for a softer corner when the banner is nested inside content rather than sitting edge-to-edge below the header.

Rounded status banner
Open in new tab