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.

Only one CTA can be displayed in an alert. It can be used to perform a direct action or redirect users to another page.

If more documentation is available, add a hyperlink "Learn more" at the end of a description.

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:

Type	Color	Icon	Info displayed
Loading	Blue	loading	Display information about a loading item
Info	Blue	info	Display general information
Success	Green	check_circle	Inform about the success of a previously performed action
Warning	Yellow	warning	Display important information that the user should notice or take action on
Error	Red	error	Alert 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.

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

• 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

• 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