Alert

To inform the user of something on a page or section.

When to use Alert ?

- Convey to users informations about the page

- For marketing informations
- To notify the user about status of their actions (see notification)

Use cases

Default alert: The alert needs to be visible but should not interfere too much with the user's visibility on the page.

Inline alert: The inline can be used within smaller spaces, insides blocks. The goal is to catch user attention without taking too much space in the page.

Dismissible alert: Some alerts can be displayed for a long time so we can let the user dismiss them. This choice of design must take into account the importance of the message, espacially if it is warning or danger information.

Hug alert: Depending the width of the page, the hug variant can be used as it is not necessary for the component to fill the width. If so, it will be placed on the left.

Do / Don’t

DO	DON’T
Ideally, only one alert should be used at a time, and it should be placed in a sufficiently visible place.	Don’t overuse the alert component. Don’t mask the content of the page with alerts

DO	DON’T
The alert message must be simple and clear, so that the user knows quickly what is happening.	Don’t put too much information in one alert. The number of items included in the alert must not exceed two.

DO	DON’T
Pay attention to the types of alert that can be dismissible. Info’ alerts can be closed because the situation is not critical.	Critical alerts, like warning or danger should not be dismissible, the information is important and the user should be aware of it.