Using Alerts
Alerts highlight key information using colour, icon combinations and ARIA roles for assistive technologies. These elements work together to convey context and the level of notification required.
Place alerts close to the content they relate to, and always position them before any action button. Ensure they share the same elevation as surrounding content, and add appropriate spacing to show their context in relation to nearby elements.
If the alert requires an action, use the appropriate button pattern. Do not use links to trigger actions.
Some alerts should be dismissible. The component includes an optional close button that dismisses the alert when selected.
Variants
Information
Provide important or supporting information that a user may need to be aware of, i.e. disclaimers, and have a policy number to hand.
Alert information example
Warning
Use this to display information that needs attention or requires user action.
Alert warning example
Danger
Use this when something critical has happened and the user must resolve an issue immediately. For example, when users cannot continue their journey or need to fix a problem.
Don’t use danger alerts for information the user does not need to address right away.
Alert danger example
Success
Use this to let users know that an action has completed successfully.
Alert success example
Alert Slim
Use this component for notification purposes when no action is required.
- Its variants and use cases match those of the other alert components
- This component has no borders.
- This component includes no buttons or actions.
- Icons always appear and cannot be turned off.
Keep the spacing between the alert and its content close to the element it relates to.