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.

Variants

Alerts come in three variants. The choice of the variant has to be evaluated case by case, but there are some rules which help to identify the right one to use.

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 3 sizes:

• small
• medium (default)
• 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.

Buttons

One or several Buttons may be added to the right side of any Alert.

Open in Figma

Closeable

Closeable Alerts feature a close Button in the top-right corner.
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