Alert
Open in Storybook Open in Figma
Alerts are used to display information, warnings, or errors in various positions. You can find real-world examples in the Alerts examples.
Alert is a coloured Card with an Icon on the left, an optional heading and some text.
Rules For Copywriters
Rules For Accessibility
- An Alert’s icon is not ornamental by default; a visually hidden label will be rendered based on the Alert’s
variant, it is derived from thealert.*keys in LanguageProvider. - A custom label can be specified using the
iconAltprop. - An empty
iconAlt=""can be specified if the icon is ornamental and/or if the text that follows is already sufficiently descriptive on its own. - When a
flagis displayed instead of an icon, theflagAltprop should be used to achieve whaticonAltdoes otherwise. - The heading in most types of Alerts is also a Heading semantically, but this has been DEPRECATED in favour of the ModalAlert way, and will be changed in the next major version.
Variants
Alerts come in three variants. The choice of the variant has to be evaluated case by case, what follows are some rules which help to identify the right one to use.
Rules For Designers
- Each
varianthas its own distinct colour, we use$color-ui-red (#cf2a1e)for error,$color-ui-blue (#135ee2)for info, and$color-ui-yellow (#f2a91e)for warning. - Unless a custom
iconis used, eachvarianthas its own distinct icon,error-circlefor error,infofor info, andwarningfor warning. - The icon colour matches the border, and the colour’s weak counterpart is used as the background colour.
Info
Info Alert communicates additional contextual information, which is not crucial for a task to be performed.
When to use
When the user can proceed with a task, and there is additional useful information, or a dependency to take note of. For example, a phone number of the advisor/bank in case a transfer is not successful or a request to carefully read or check data before continuing in a flow.
Warning
Warning Alert shows crucial information with higher emphasis than a hint. However, it is not blocking the user from completing a task.
When to use
- When the user can proceed with a task but is warned that there are consequences to consider in doing so. For example, upon signing a transfer, the user is warned that their account balance will go into overdraft.
- When the user has to take a dedicated action in order to be able to proceed with a task. For example, a warning that specific outdated information needs to be updated to continue.
Error
Error Alert displays critical information which completely blocks the user from proceeding in performing a task.
When to use
- When the user cannot proceed and is blocked from completing a task. This could be a technical error. There is nothing the user can do, except maybe try again. For example, a transaction could not be signed successfully due to an authorization error.
- In a Form to display validation errors. In this case small size has to be used.
Sizes
Alerts come in three sizes: small, medium (default), and large.
Small
Small Alerts are usually used as part of the FormField to indicate information related to the field. In addition to the usual Icon, there is also a possibility to specify a Flag instead.
Small Alerts don’t display a heading.
Medium
Medium is the default, usual size.
Large
Large Alerts usually require the user to do something, e.g. by pressing a Button in the Alert.
Rules For Designers
- Icon is vertically centred in tiers
MDand above.
Buttons
One or several Buttons may be added to the right side of any Alert.
Rules For Designers
- Buttons use tertiary variant in small Alerts and secondary variant in medium and large Alerts.
- In tiers
MDand above, Buttons take up 4 grid columns out of 12. - In tiers
XSandSM, Buttons are placed below the content at 100% width.
Closeable
Closeable Alerts feature a close Button in the top-right corner. A closeable Alert always needs to have a heading. Small Alerts cannot be closeable.
ModalAlert
ModalAlerts are similar to Alerts. They are never closeable. The heading is rendered as the first sentence of the content, in Emphasis.
CollapsibleAlert
Rules For Designers
- The CollapsibleAlert always needs to have a heading.
- There is no small CollapsibleAlert.