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 or system action. It contains simple feedback about the action, while any current activity remains visible and interactive.
Types
Type | Usage | Example |
|---|---|---|
Info | 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 failed to complete |  |
Continuous Action | An action that takes more than 3 seconds (exact duration TBD) |  |
Usage & Behaviour
General guidelines
Toasts are triggered either by the user (e.g. refreshing a data table) or by the system (e.g. server error)
The toast appears from the left with a slide effect
Error toasts stay on the screen until the user actively closes them warnings?
Other toasts disappear automatically after X seconds with a fade effect (the user can still close them manually)
...
Clicking the closing button closes the toast with a fade effect.
When shown, clicking the Cancel button cancels the action and closes the toast. In this case another information toast may appear, indicating that the action was cancelled
When shown, clicking the expand button:
expands the toast upwards with a slide effect, revealing the rest of the text.
hides the expand button.
Multiple Toasts
In case an additional toast appears toasts appeared before the previous one disappearedones were closed or disappeared the page will show multiple toasts:
If
In case the new |
|---|
...
toast… | Behaviour | Design |
|---|---|---|
is not an error toast | it will appear at the top of the toasts stack |  |
is the first error toast |
...
on the page | it will appear at the bottom of the |
...
toasts stack, pushing all other toasts upwards |
...
If the new toast was another error toast,
...
 | ||
is an additional error toast (the 2nd, the 3rd etc…) | it will stack behind the previous error toast. In this case: |  |
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 workspacesAggregating notifications
Continuous processes (more than 10 seconds), minimized toast
...
<<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 >>
...