# 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.

{% hint style="warning" %}
**Only one CTA can be displayed in an alert.** It can be used to perform a direct action or redirect users to another page.
{% endhint %}

{% hint style="info" %}
If more documentation is available, add a hyperlink `"Learn more about ..."` at the end of a description.
{% endhint %}

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FtQBcyX3QfWJg2qhf6oYH%2FAlerts%20details.png?alt=media&#x26;token=231827d0-117a-4faf-8d0a-a3296cd8d61c" alt=""><figcaption><p>Example of an Alert with a title, description, hyperlink, dismissible icon and CTA</p></figcaption></figure>

### 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&#x20;

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:

<table><thead><tr><th width="120">Type</th><th width="96">Color</th><th width="141">Icon</th><th>Info displayed</th></tr></thead><tbody><tr><td>Loading</td><td>Blue</td><td>loading</td><td>Display information about a loading item</td></tr><tr><td>Info</td><td>Blue</td><td>info</td><td>Display general information</td></tr><tr><td>Success</td><td>Green</td><td>check_circle</td><td>Inform about the success of a previously performed action</td></tr><tr><td>Warning</td><td>Yellow</td><td>warning</td><td>Display important information that the user should notice or take action on</td></tr><tr><td>Error</td><td>Red</td><td>error</td><td>Alert about a very critical issue (suspension, errors, etc)</td></tr></tbody></table>

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FQNkMZ8rb5Y2qVjPqdCZ3%2FAlerts%20status.png?alt=media&#x26;token=0ba7b5c2-e506-4012-8139-22d32dc28d77" alt=""><figcaption></figcaption></figure>

### LoadingAlert <a href="#id-0839d4" id="id-0839d4"></a>

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`

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F2TZxphnPnWvuPJwuZzSu%2Falerts-loading.gif?alt=media&#x26;token=50e90208-4e0e-4775-a1ff-a8bf5817ccef" alt=""><figcaption></figcaption></figure>

## Alert Compact <a href="#id-0839d4" id="id-0839d4"></a>

`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`.&#x20;

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FpJap4FSVMsAharXMqIn7%2Fimage.png?alt=media&#x26;token=835a0de2-98cc-4cb4-8206-4f8dedcc24da" alt=""><figcaption><p>exemple of Alert Compact use in a panel</p></figcaption></figure>

{% hint style="warning" %}
You cannot use this alert in Date Time Range Modals
{% endhint %}

## Content <a href="#id-61e16c" id="id-61e16c"></a>

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

#### Title <a href="#id-22895a" id="id-22895a"></a>

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.

{% hint style="info" %}
Template: **< 2 to 3 words>**
{% endhint %}

#### Body <a href="#id-390b4f" id="id-390b4f"></a>

* 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.

{% hint style="info" %}
Template: **< 1 sentence to help users understand what’s happening now >**
{% endhint %}

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FxWOcyDrDXVjPB8zMFtp8%2FAlerts%20Example.png?alt=media&#x26;token=d2cf6a60-6040-4ae0-97fa-596278056d1f" alt=""><figcaption></figcaption></figure>

#### Success

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

{% hint style="info" %}
Template: **< 1 sentence to explain what’s going to happen next >**
{% endhint %}

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FVrRXAI1cKTqMnIAhUA7V%2FAlerts%20Example-1.png?alt=media&#x26;token=5226e077-b381-48b2-8df4-b98603c903f0" alt=""><figcaption></figcaption></figure>

#### 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.

{% hint style="info" %}
Template: **< 1 solution-oriented sentence to help users fix what went wrong >**
{% endhint %}

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FrlMqP854dOvIvUxptDuV%2FAlerts%20Example-3.png?alt=media&#x26;token=563c3508-67ce-42ea-a365-a103de89ac88" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FRafyd4Owdq9JDliuFf1e%2Fimage.png?alt=media&#x26;token=6b08e668-6fa7-430d-9cc2-7fc9a588c74a" alt="" width="563"><figcaption></figcaption></figure>

#### Button <a href="#id-537dab" id="id-537dab"></a>

Microcopy should follow [button guidelines](https://design.mirakl.com/design/actions/buttons#content).

{% hint style="info" %}
Template: < Action verb (+ noun) >
{% endhint %}

## Accessibility <a href="#id-88a089" id="id-88a089"></a>

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 <a href="#id-8864e6" id="id-8864e6"></a>

{% hint style="success" %}

* Keep labels and descriptions clear and concise
* Set clear expectations on user's action in the title
* Display only one action per alert
* Add a link to the documentation if more information is available
  {% endhint %}

{% hint style="danger" %}

* Do not change icons
* Do not forget the title (never display only the description and CTA)
* Do not use "Please" or "Thank you" or Latinisms
* Do not add actions to Compact Alert
  {% endhint %}