Guides Foundations Components Patterns Styles

Service outage banner

Informs users of an existing or upcoming outage or reduced service level, affecting the whole system or specific products.

Appearance

Widespread outages

For service disruptions that impact entire systems or products, such as site-wide maintenance, product outages and overdue accounts.

Critical system outage banner example. Notice how the text wraps across different screen sizes. We maximise text width to limit the height of the banner. Read more

Open in Playroom

Anatomy

There is currently no out-of-the-box banner component for top-level messaging. Create a custom component and follow the recommendations below.

Apply a critical or caution tone and matching icon.
Provide a “Read more” link which opens a Dialog when relevant.
Place the banner at the very top of the page, above the site navigation.
Widespread disruption banners should remain constant without the option to dismiss them.

Technical details

Create a custom banner using Box with paddingY="gutter" and paddingX={{ mobile: "xsmall", tablet: "gutter" }} to follow PageBlock screen gutters.
Set the background to the light version of the selected tone (e.g. criticalLight) and use the corresponding icon (e.g. IconCritical).
Left-align the banner text and wrap it in a centre-aligned Stack so icon spacing stays uniform.
Align the banner look and feel to the latest Alert component style, but do not round the corners.

Isolated outages

For service disruptions that impact a specific part of a product, such as specific feature outages and limited site access.

This is a contextual caution message that can be dismissed.

Open in Playroom

Anatomy

Use the Alert component in tone critical or caution.
Provide a “Read more” link which opens a Dialog when relevant.
Place the Alert within the context of the page, below the site navigation.
Isolated disruption banners should generally remain constant but can be made dismissible using the onClose property.

Layout

Stacking multiple banners

Widespread banners should sit at the very top of the page, above the site navigation.
Isolated banners should sit within the context of the page, below the site navigation.
Critical banners should be placed above caution banners.

Critical system outage banner example with some text. Read more

Caution banner example with some text. Read more

Navigation

Hello world

This is a contextual critical message that cannot be dismissed.

This is a contextual caution message that can be dismissed.

Content...

Footer

Open in Playroom

Best practices

General best practice

A service outage banner should let customers know:

what parts of the site are impacted
how they’ll be impacted
when the site will be impacted
when to expect regular performance.

Service outage banners should be used in conjunction with other communications. Ideally, the customer would have heard about the outage before arriving on platform. The outage banner should serve as a reminder rather than be the first news of the outage.

Content guidelines

Recommended messages

Disruption	Planned outages	Unplanned outages
Widespread disruption	We’re improving our site and will not be available from 11 am, Friday 13 Jan 2023 to 3 pm, Saturday 14 Jan 2023. Sorry for any inconvenience.	Our site isn’t available right now. We’re doing our best to fix this. Try refreshing the page or check back later.
Isolated disruption	We’re improving our site. Your ad performance reports will not be available until 11 am, Friday 13 Jan 2023.Sorry for any inconvenience. If you need help, reach out to our Customer Service team.	Your ad performance reports aren’t available right now. We’re doing our best to fix this. Try refreshing the page or check back later.If it still doesn’t work, reach out to our Customer Service team.
Slow or intermittent service	We’re improving our site. Posting a job ad may be slower than usual until 11 am, Friday 13 Jan 2023.Sorry for any inconvenience. If you need help, reach out to our Customer Service team.	Posting a job ad may be slower than usual. We’re doing our best to fix this. Try refreshing the page or check back later.

Writing your own message

If the scenario you need isn's covered, use this template to craft your own message:“We’re improving our site. [Affected task] will be [how it will be affected] until [time day date]. Sorry for any inconvenience. If you need help, reach out to our Customer Service team.”

We’re improving our site. Posting a job ad will be slower than usual until 11 am, Friday 13 Jan 2023. Sorry for any inconvenience. If you need help, reach out to our Customer Service team.

Open in Playroom

Recommendations

Focus on the task that’s likely to be disrupted. Try not to say a product or feature is unavailable, unless it’s clear how this would impact the user.
Show the right time for the user. Where possible, show the right date and time based on the user’s location.
Keep it short. Summarise what’s happening in the banner. If you really need to provide more information, add a link to the banner that opens a Dialog.
Link the content you’re providing more details about. Avoid “Read more” links, they’re not great for accessibility and don’t provide enough info about the content you’re linking to.
Only direct people to Customer Service when our team can genuinely provide help.

When to use

Use a service outage banner when:

an entire system or product is unavailable or reduced
to inform customers about upcoming planned disruptions.

Don’t use a service outage banner when:

a single user action failed (use an Error state instead)
there is no data available yet (use an Empty state instead)

Alert — For strong in-flow messages that sit at page or section level.
Dialog — For exposing additional content in a modal with rich formatting.
Box — For creating custom layouts and UI elements when there is no Braid equivalent.
Messages to users — For finding the right messaging component or pattern based on context and urgency.

On this page