Alert boxes

Alerts come in five different styles and are configurable to allow for simple styling, eg links, bold and italics. They come with a default icon and can be configured with or without close buttons. The info style Alert is the only style that allows flexibility in the icon used. Definitions and usage examples for each style are provided further down the page.

Alert text

Styles

Alert text comes in four different styles and is configurable to allow for simple styling, eg links, bold and italics. It must be used with the defaulted icon to comply with accessibility guidelines, as per Alert boxes. Definitions and usage examples for each style are provided further down the page.

Icon sizes

The icon that accompanies Alert text has three size options, Md-24px, Sm-18px and Xs-12px.

User experience

Alert boxes are used to differentiate and emphasise inline messaging, they are simple functional elements designed to clearly separate messaging from content. Alerts can be configured with a close button to allow the message to be dismissed and removed from the content flow, they have a default icon to communicate meaning without colour.

Use alerts to draw attention to specific messages in a particular context. They should be reserved for system responses, in context instructional messages, and warnings.

Alert types

Success: The green message colour and tick icon is used to communicate successful completion of a process or task. It is commonly used with confirmation messaging, the intention is to provide confidence that a process has been completed successfully and the user can now move on.

Information: The blue message colour and info icon is used to convey useful information. It should be used for things like instructions, feedback about information that has been provided, or high-level information about a system or process. This style provides flexibility to use a different icon. To remain accessible, do not use any of the default icons that are used for the other alert types.

Warning: The orange message colour and warning icon is for use in scenarios where the user needs to understand something before proceeding. It is saved for necessary messaging but not for error messages. For example, ‘this process will time-out in 3 min’ - use it as a ‘Watch out’, rather than a stop.

Danger: The red message colour and danger icon is most commonly used for error messages, eg form validation. This alert is to bring the user’s attention to something that they must address before they can proceed, generally a resolvable issue.

System: The System alert is for extraordinary circumstances where there is no way of proceeding. For example, the entire system has failed and there is no next step to offer the user.

Visual design

Alerts are intentionally designed to differ from the UI content which is typically styled using the brands colours etc. Alerts are not intended to be part of the brand, rather they exist as a separate graphic style which (if used correctly) gives them more emphasis and allows customers to understand the difference between content and messaging.

Alerts convey meaning through colour and icons using a combination of carefully designed accessible colour and tint combinations. This cross-brand, contextual colour palette, called Reserved colours is for alert messaging only.

Dos and don’ts

• Avoid formatting alert text.
• Don’t overuse alerts as this can diminish their effect and can make an experience feel broken.
• Alerts shouldn't be used for marketing messaging as other critical messages will be ignored through learned behaviours.
• Don’t use the reserved colour palette for anything other than alert message components.
• Don’t alter the colours or tints that make up each of the alert message components or use additional colours within the alert message.
• Don’t alter the borders colour, radius etc
• Avoid making alerts too complex. They’re only intended to be simple feedback messages.

Where is this available?