Global alert

Usage

Global alerts are designed to capture the attention of the user in a deliberately intrusive way. They persist over a session but are user dismissible, and are purposefully created and not initiated by a user interaction or system event.

Use global alerts:

• to attract the attention of the user for important messages, or to encourage an action
• for messages or actions that are relevant to the entire product or system, not just a feature or page

Do:

• use clear, concise easy to understand language, to minimise cognitive load
• use a button or link text in the description to provide users with more information or to complete an action
• use at the upper most part of the screen, before the masthead
• reserve the use of the critical alert for circumstances which warrant it

Global alert states

Global alerts are styled according to their purpose:

• Default alert - used to show non-critical important information
• Critical alert - used to show critical information
• Light alert - used as an alternative to the blue default on sites where blue features prominently.

When to avoid

Do not display in response to an action initiated by a user interaction or system event.

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.