Figma Links: Web / iOS / Annotation

Overview

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.

Key Points

• There are four styles of alerts; information, warning, danger and success.
• Each alert has a default icon but these can be changed if required.
• 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.
• Don’t use danger alerts for information that the user doesn’t need to address immediately.

Usage

Alerts should be placed inline with other components but above the content they are trying to highlight.

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.