Key Points
- There are four styles of alerts; information, warning, danger and success
- Each alert has a default icon
- Alerts messages should be concise but they can wrap over multiple lines
- Sizes can be adjusted to suit but the line length of the message should be inline with our copy guidelines
- Give a clear title to summarise the content
- Alerts have the option to be include a dismissable button or up to two call to action (CTA) buttons
Usage
Alerts provide feedback to the user in a more stylised manner than a body copy. They are supported by an icon and encapsulated in a styled container to highlight tone and emphasis. They have the ability to be placed in close proximity to the information they are relevant to and should always be placed before any action button.
Example of an information alert
Alerts should be placed inline with other components but above the content they are trying to highlight.
There should be spacing around the alert to show the context of the message in relation to other content, more details can be found in the layout guidelines.
Information
Provide important or supporting information that a user may need to be aware of i.e. disclaimers, have a policy number to hand.
Warning
Use this to display information that needs attention or users need to take an action on.
Danger
Use this when something critical has happened and the user has to resolve an issue immediately. For example when users cannot proceed further in a journey or they need to fix something.
Don’t use danger alerts for information that the user doesn’t need to address immediately.
Success
Use this to let the users know that an action has happened successfully.
Behaviour
Alerts are static areas of content and they are displayed either on load or after a process has completed. Therefore their behaviour is limited.
Buttons to be added
Variants
Dismissal
A small ‘x’ icon in the top right is used to dismiss the alert. Close button is optional and shouldn’t be included if the alert is critical for a user to read.
Buttons
All alert styles have the option to include up to two CTA buttons.
File Links
Web Component
Web Alert and alert slim components.
iOS Component
Components for iOS
Android Component
Component for Android
Annotations
Alert annotations and redlines.