> For the complete documentation index, see [llms.txt](https://design.mirakl.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/feedback/alerts.md). # Alerts Alerts highlight important information that needs to be communicated quickly to the user.
## Overview Alerts are meant to attract users' attention. Use them cautiously, as they can become overwhelming. ## Guidelines We recommend using only one alert per page and action. It may happen in a few cases to stack several alerts for different messages. Order them in order of importance for users (Warning > Info). Alerts have to be displayed as close as possible to the element they are related to, preferably before: * at the top of a page if the information is related to the whole page, * above a panel, if the information is related to a specific part of the page, * inside a panel (or a modal) if the information displayed is related to a very specific section. ### When to use * When important information needs to be communicated to the user. ### When not to use * To display marketing information or feature promotion. 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"` at the end of a description. {% endhint %}

Example of an Alert with a title, description, hyperlink, dismissible icon and CTA

#### LoadingAlert Loading Alert is a specific 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`
### Component variants Alerts convey different levels of severity. In ROMA, we have determined 5 stages of severity: from general information to critical issues. Each of the 5 levels has its design style: ###
TypeColorIconInfo displayed
LoadingBlueloadingDisplay information about a loading item
InfoBlueinfoDisplay general information
SuccessGreencheck_circleInform about the success of a previously performed action
WarningYellowwarningDisplay important information that the user should notice or take action on
ErrorRederrorAlert about a very critical issue (suspension, errors, etc)
## Content Focus on a single piece of information. An alert must focus on a dedicated topic 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 * Info Add valuable information that may 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](/~/changes/DpgERwSwrKIthStzL4D6/components/actions/buttons.md#content). ## 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 ...). To reduce mental load and stress, keep labels and descriptions clear and concise. ## Key takeaways {% 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 overstack alerts {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/feedback/alerts.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.