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 actionusers or systems actions. 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 Toasts appear from the left side of the screen with a slide effect.
Error toasts stay on the screen until the user actively closes them warnings?
Other toasts disappear automatically after X a few seconds with a fade effect (the user can still close them manually)
Structure
A toast may contain consist of the following elements:
An icon representing their its type, or, in case of a continuous action, an animated progress indicator
Text, including a title (optional) and the body of the text
A closing button (x)
A Cancel button
An expand button (see below)
...
All toasts appear at the bottom-left end side of the screen.
Toasts have a fixed width.
The height of a toast depends on the amount of text it contains. In case of more than 3 lines a an expand button will appear, allowing the user to expand the toast.
...
Clicking the closing button closes the toast with a short fade effect.
When shown, clicking the Cancel button cancels the action that triggered the toast and closes the toastit. 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.
pushes all other toasts upwards (see below).
Multiple Toasts
In case additional toasts appeared before previous ones were closed or disappeared, the page will show multiple toasts:
In case the new toast…Condition | Behaviour | Design |
|---|---|---|
In case the new toast is not an error toast (i.e. info toast, success toast etc.) | it will appear at the top of the toasts stackon top, above all previous toasts |  |
In case the new toast is the first error toast on the page | it will appear at the bottom of the toasts stack, pushing all other toasts upwards |  |
In case the new toast is an additional error toast (not the 2nd, the 3rd etc…first one on the page) | it will stack appear behind and slightly above the previous error toast. In this case: |  |
Best practices
Use toasts
to display application-level messages, warnings and errors.
when you need a relatively unobtrusive way to show messages.
Don’t use toasts
for critical messages. In this case consider using Message Popups
General
Keep the text short and informative
In case of warning or failure provide toasts offer the user with a recommendationway to recover
Open Issues
Behaviour across workspaces
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 >>
...