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.
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 β
- 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.
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.
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 groups β
More than one notification can be displayed at a time. Leave a 12px spacing between items.
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β.
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.