Global alert

import { ... } from '@ag.ds-next/react/global-alert';

<GlobalAlert title="Alert title">
	<Text as="p">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce massa nibh,
		aliquam vel dolor non, gravida porttitor nulla. Pellentesque cursus orci
		vulputate nibh sagittis blandit.
	</Text>
</GlobalAlert>

Global alerts are intrusive alerts that appear at the top of a page. They are used to communicate system or service messages not page or feature messages. Global alerts are not initiated by the user and should persist for a session but can be dismissed by the user.

Global alerts should be used sparingly due to their prominent nature and should be coordinated across product teams if used on microfrontend applications.

Do

• place alerts at the top of the page above the Header
• keep text concise
• explain the problem/issue and (if possible) when it will be resolved
• offer an alternative path to contact or support if possible
• consider adding a Close button so users can easily dismiss the alert
• use a title to provide a short summary of the alert.

Don’t

• use for anything that’s not system level
• let alert banners time out.

Dismissable

Global alerts can be dismissed by a user if they have understood the message and no longer need to see it.

Use the onClose prop to make the alert dismissable. Ensure Global alerts that are closed by the user are never seen again. You could do this through a feature flag in a database, or by setting a value in the browser.

When a user dismisses an alert, it’s important to manage their focus appropriately to help them continue their task or journey. In some cases, there may not be an obvious (or any) element to send focus to, such as when the alert was triggered by an action on a previous page or from a drawer that is now closed. Always carefully consider the context and previous user actions before moving their focus to ensure a smooth and accessible experience.

<GlobalAlert title="Alert title" onClose={console.log}>
	<Text as="p">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce massa nibh,
		aliquam vel dolor non, gravida porttitor nulla. Pellentesque cursus orci
		vulputate nibh sagittis blandit.
	</Text>
</GlobalAlert>

Information alert

An info version of Global alert is also available, which can be used to display system-wide information messages which are not negative in nature.

This could include a general announcement about a feature or policy. This variant should be used sparingly.

<GlobalAlert title="Information" tone="info">
	<Text as="p">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce massa nibh,
		aliquam vel dolor non, gravida porttitor nulla. Pellentesque cursus orci
		vulputate nibh sagittis blandit.
	</Text>
</GlobalAlert>

Related components

• Callout – Callouts are an excerpt of text used to draw attention to important or interesting information. They should not be confused with Page alerts.
• Page alert – Page alerts are colour-coded, non-disruptive notifications that provide Success, Error, Warning or Information messages at relevant times during the user journey. They should not be confused with Callouts.
• Section alert – Section alerts are non-disruptive notifications that provide Success, Error and Warning messages about a state change in a section of a page.

Related patterns

• Messaging – Messaging conveys contextual information to the user, provides information in relation to a service or interaction, and provides feedback in response to their actions or the current system status.