A NSW Government website
Design System v3.0.5

In-page alert

In-page alerts are used to contextually inform users of important information or status of an interaction.

Figma React

Usage

Use in-page alerts to attract the user's attention. Alerts are often displayed following a user interaction or system event. The level of attention is dependent on the importance of the alert.

Do:

  • use clear, concise easy to understand language, to minimise cognitive load
  • display the alerts in context and at an appropriate time
  • avoid using multiple alerts on a single screen (if multiple are required, display them by importance; critical, warning, success then information).
  • use the appropriate alert for the task at hand.

Do not:

  • overuse alerts as this will erode their effectiveness
  • use for global alerts which are required on all pages.

In-page alert states

In-page alert are styled according to their purpose:

Information alert

Designed to be less intrusive or interruptive than other levels of alert:

  • use for information the user should know, but is not critical
  • use for tips or information which the user can benefit from
  • use for messages which don't require too much attention or action
  • don't use in response to a user action.

Success alert

  • use to inform the user that an action was performed successfully (e.g. submitting a form or registering an account).

Warning alert

  • use to warn the user of a possible negative outcome (e.g. password expiry)
  • provide sufficient information to avoid the problem
  • use for an action that is out of the ordinary or might not be desired.

Critical alert

  • use where a system event has failed
  • use when the user has made an error
  • use where the user is blocked until the issue is resolved, or the issue needs resolving immediately
  • provide sufficient information on the issue and resolution to fix the issue
  • don't use for validation or validation summary.

How this component works

The family of alerts is designed with a consistent layout to aid comprehension of what they are and how they work.

They are designed to look 'not always present', to draw the user's attention.

The type and urgency of the alert is communicated through colour and the icon used.

The icons used are industry standard, with the exception of the warning and critical icons which are somewhat interchangeable. Both the warning and critical icons are perceived as more important to aid the user's comprehension.

The alerts are not dismissible.

Accessibility

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

Information

Rockdale Service Centre is coming soon

Rockdale Agency will close on 9 March 2018 and re-open in April. Please visit Kogarah Service Centre during this closure.

Rockdale Agency will close on 9 March 2018 and re-open in April. Please visit Kogarah Service Centre during this closure.

Critical

It looks like there was a problem

Please contact your service desk for further assistance.

It looks like there was a problem. Please contact your service desk for further assistance.

Warning

Password expiring soon

Your password is expiring in 4 days. Please change your password.

Password expiring soon. Your password is expiring in 4 days. Please change your password.

Success

Your application has been received

Thank you for submitting your interest. We will be in contact within 5 business days.

Your application has been received. We will be in contact within 5 business days.