A NSW Government website
Design System v3.2.0

Global alert

Global alerts display across the top of an entire site to show important information to users.

Figma React

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.

Information

Light

Critical