Alerts are meant to communicate any sort of system information. They are persistent messages that may or may not be dismissible.
Alert banners are placed on the very top of the screen, pushing every other element down.
|
Component |
Priority |
Usage |
Placement |
User action |
|---|---|---|---|---|
|
Inline alert |
Medium to high priority |
Contextual use It's related to the page content |
Inside the container |
Optional: alerts remain until dismissed by the user or until the state that caused the alert is resolved |
|
Banner alert |
Same as above |
Global/system use It's related to the system itself and not a specific page or element. |
On the very top of the screen, full width |
Same as above |
Anatomy
Structure
|
|
|
icon |
It must always show and should be placed before the description. |
|
description |
It must always show and should sum up the exact information the user must know in a few words. It’s important the copy respects UX writing rules. |
|
close button |
Optional. It should only be shown when the banner is dismissible. |
|
action |
Whenever the user can act upon the information shown in the banner, the action link should be right after the description text. |
|
pagination |
When there are multiple messages to show, they must be displayed on the same banner and organised through pagination. |
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Type |
notification fail alert success |
Depends on the nature of the message that's being displayed. |
|
Icon |
--- |
The icon is always present and must be used to provide further context. |
|
Close button |
true false |
Visible when the alert is dismissible. |
|
Action |
true false |
When the user can act upon the message conveyed, there can be an action button in the alert.
In desktop alerts, it's in line with the text. In mobile alerts, it's placed in the footer. |
|
Navigation |
true false |
Shown when there are multiple messages to display.
In desktop alerts, it's in line with the text. In mobile alerts, it's placed in the footer. |
Behaviour
Interaction
Mobile scrolling
When there is more than one line of text (height > 40px), the entire description text is visible when the user is on top of the page.
When the user scrolls down, the description is truncated and only one line is visible. In this case, an ellipsis should appear at the end of the text line. The close button should also disappear.
When the user scrolls back to the top of the page, all of the text should be visible again
Clicking on a collapsed notification
When the description text is hidden and the user clicks on the text, the alert banner expands again
Note: in desktop devices, the cursor should be a pointer while hovering.
Different size banners scroll
When there is more than one alert message, and there’s pagination, each message should have its own height.
In this case, the heights should transition with a 0.3s dissolve animation.
Note: in desktop devices, the cursor should be a pointer while hovering.
Guidelines
⛔️ Don't
Don’t
Don’t
Caution