Global alert
Global alerts display across the top of an entire site to show important information to users.
Catastrophic weather conditions are forecast this week for north and north west regions of NSW. Keep up to date with the latest bush fires alerts and warnings in your area.
Show code Hide code
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.
Guidance
- use global alerts to attract the attention of the user for important messages, or to encourage an action
- use global alerts for messages or actions that are relevant to the entire product or system, not just a feature or page
- 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
- display in response to an action initiated by a user interaction or system event.
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.
Accessibility
All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.
The alert content remains available without JavaScript. The close button is only shown after the Global Alert JavaScript has initialised and can dismiss the alert.