Alert ​

Alerts are interactive notifications that communicate direct and concise feedback to the user, with the option to add a simple action they can perform. They can have an associated icon (on the left) for the message and can be manually dismissed by the user.

Overview

Usage guidelines ​

When to use ​
  • To give feedback after an action has taken place.
  • To give instructions on how to move forward or resolve issues.

Writing guidelines ​

Length Notification messages should be direct and concise. Text can wrap to more than one line if necessary.

Capitalization and case Write text in notifications in sentence case.

Specifications ​

Anatomy ​

Anatomy of Alert
  • Container: its color can vary according to the status (info, positive, negative, alert).
  • Icon (optional)
  • Text: communicates a short feedback message.
  • Action (optional).
  • Close icon

Size ​

Alerts come in one size. The width and height can vary according to content length and device or container size. In general, make sure content doesn't exceed two lines.

Styling ​

Notifications can be styled to communicate their status: info, positive, negative or alert.

Alert colors

Behavior ​

Positioning and alignment ​

Alerts typically appear floating at the top of the screen, with the option to appear at the bottom if the case requires. Alerts can be stretched to fit the width of the container or device maintaining a 24px margin from all edges.

Alert positioning

Alerts can also be positioned inline within a layout, such as in a form. In this case, there's no need to leave a 24px margin from the edges and the alert will be treated as another element of the layout.

Alert positioning in forms

Alert groups ​

More than one notification can be displayed at a time. Leave a 12px spacing between items.

Grouping alerts

Interaction ​

While toasts are non-interactive elements, alerts can be interacted with. In alerts interaction is limited to dismissing the message or performing a simple, non-essential action, such as “Edit”, “Retry”, “View”, “Undo”.

Interaction of alerts
When using alert notifications, always provide a way to dismiss the message.
By default, don't hide both the button and close icon, only hide them in cases when the alert has to be continuosly present on the page until the user takes some action outside the banner (like for instance, an alert for unpaid items that can suppose a cancellation of an account).

Accessibility considerations ​

Don't use color as the only way to communicate meaning. Make sure the text is clear and useful and make use of icons if they can help enhance the meaning.