Alerts

Overview

Alerts are meant to attract users' attention and provide them contextual information. Use them cautiously, as they can become overwhelming.

Guidelines

An alert is always composed of at least an icon and a title. The dismissible feature is optional, displayed with a close icon in the top right corner. Short description (children prop) and Action Button are optional.

When to use

• Immediate Attention Required: Utilize Alerts to convey essential information that demands the user's immediate attention.

• Contextual Information: Implement Alerts to offer contextual guidance or feedback in response to user actions, enhancing their understanding and decision-making process.

When not to use

• Non-Essential Information: Avoid using Alerts for non-essential information that could detract from the user experience, such as promotional content or marketing messages.

• Overuse: Refrain from excessive use of Alerts, as this can lead to user desensitization to important messages and potentially overwhelm the user.

Variants

Alerts convey different levels of severity. We have determined 5 stages of severity: from general information to critical issues.

Each of the 5 levels has its design style:

LoadingAlert

Loading Alert is a variant of Alert to be used when users are uploading a file into the platform. This component is a piece of visual information informing users their request is being processed and should wait until its completion.

Loading Alert is an Info Alert (blue) with a spinner icon

Alert Compact

Alert Compact is a streamlined version of the standard Alert, optimized for use in constrained spaces where only a succinct message is necessary, with no actions. It is ideal for panels, modals or sections of the interface where minimalistic feedback is required.

Alert Compact is a component in itself, not a variant of Alert.

Content

An alert focuses on a specific topic or piece of information and provide only one main call to action.

Title

The text should be concise and clear so that users understand right away what's going on on the page. Capitalize only on the first word, with no period at the end.

Body

• 1 to 2 sentences

• Capitalize the first word, use full stop

• Avoid repeating the heading

• Avoid phrases like ‘You can’. They are not decisive enough for users

Informative

Add any information to help the user understand what's happening on the page.

Success

Explain the impact of the action and what's going to happen next.

Warning and error

Explain how the user can fix what went wrong. You may add a hyperlink to redirect users to the documentation if needed.

Button

Microcopy should follow button guidelines.

Accessibility

To communicate the level of severity, we combine a color pattern with a specific icon. Do not change the icon under any circumstance, as colors are not perceived the same way by everyone (disabilities, cultures ...).

Key takeaways