Alert

Alerts display essential messages that require user attention or acknowledgement. They use colour, iconography, and distinct styling to communicate success, information, warnings, or errors.

How they work

Alerts

Alert components are static content areas shown either when a page loads or after a process completes.

Dismissal

Provide a way for users to dismiss persistent alerts manually when appropriate. The close button is optional and should not be included if the alert contains critical information that the user must read.

Buttons

All alert styles support up to two call-to-action (CTA) buttons when an action is required.

Examples of the alert component for web and the various button combinations

Examples of button combinations

Alert Slim

The Alert Slim component is static. It cannot be dismissed and does not support buttons.