Related pages: Message Popups
Lead: Liav Nadler
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
A toast is a small message box that appears in response to a user action or system actionevent. It contains simple feedback about the actionevent, while any current activity remains visible and interactive.
Types
Type | Usage | Example |
|---|
Information | General information related to an action. |
 | |
Success | Actions that were completed successfully. |
 | |
Warning | System warnings or actions that may cause a problem. |
 | |
Error | System errors or actions that have failed to complete. |
 | |
Continuous Action | An action that takes more than 3 seconds |
. |   |
Usage &
...
Behavior
General guidelines
Toasts are triggered either by the user (e.g. refreshing a data table) or by the system (e.g. a server error).
The toast appears Toasts appear from the left with bottom-left side of the screen using a slide effect.
Error toasts stay on the screen until the user actively closes them warnings?.
Other toasts types of toast disappear automatically after X a few seconds with a fade effect (the .
The user can still always close them manually)a toast manually, even if it will automatically close.
Structure
A toast may
...
consist of:
Either:
An an icon representing their type or, in case of the type of toast, such as a check mark or warning triangle, or
where there is a continuous action, an animated progress indicator Progress Indicator.
Text, including:
a title (optional) and .
the message body of the text.
A closing button (x).
A Cancel button, for continuous actions.
An expand button for longer messages (see Placement below).
Placement and Positioning
All toasts appear at from the bottom-left end side of the screen (using a slide effect).
Toasts have a fixed width.
The height of a toast depends on the amount of text it contains. In case of Where there are more than 3 lines a an expand button will appear, allowing the user to expand enlarge the toast.
...
 |  |
Interaction
Mouseover a toast will keep it visible, even after exceeding the time limit before it disappears.
Clicking the closing button (x) closes the toast with a short fade effect.
When shown, clicking the Cancel button cancels the continuous action which has triggered the toast, and closes the toastit. In this case, another information toast may appear, indicating that the action was cancelledcanceled.
When shown, clicking the expand button:
expands the toast upwards with a slide effect, revealing the rest of the text.
hides the expand button.
pushes all other toasts upwards (see Multiple Toasts
...
- In case an additional
below).
Multiple Toasts
Where a new toast appears before a previous one has been closed, the previous one disappeared:
If the new toast was the first error toast, itpage will show multiple toasts.
Condition | Behavior | Design |
|---|---|---|
The new toast is not an error toast (i.e. info or success toasts etc.) | The new toast will appear on top, above all previous toasts. |
|
The new toast is the first error toast on the page. | The new toast will appear at the bottom |
...
, pushing all other toasts upwards. |
...
The new toast |
...
If the new toast was
Best practices
Keep the text short and informative
In case of warning or failure provide the user with a recommendation
Edge Cases
In case another action occurred before the previous toast disappeared:
The new toast will push the previous toast upwards
If a lower toast disappeared the upper toasts will move down respectively
Open Issues
Behaviour across workspaces
Aggregating notifications
Continuous processes (more than 10 seconds), minimized toast
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Focus management
While the toast is shown any current activity remains visible and interactive
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>
Contrast & size compliance
...
is an additional error toast (there are other error toasts already on the page). | The new error toast will be stacked behind the existing error toasts. It should appear underneath and slightly above the previous error toasts, showing the first line of text. In this case:
|
|
Best practices
Use:
to display application-level messages, warnings, and errors.
when you need a relatively unobtrusive way to show messages, and to keep the rest of the page interactive.
Don’t use:
for critical messages → use Message Popups.
General
Keep the text short and informative.
For warning or error toasts, offer the user a way to recover.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|
<<Zeplin Link>>
<<Screen with 200 width>>
Code
...
Code
...