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 a simple feedback about the action, while any current activity remains visible and interactive.
Types
Type | Usage | Example | Position | Behaviour | Color | |
|---|---|---|---|---|---|---|
Info | General information about the related to an action |  | Bottom of the screen, centered (TBD) |
| Blue | Success |
Action Success | Actions that were completed successfully |  | Bottom of the screen, centered (TBD) |
| Green | |
Warning | Action caused System warnings or actions that may cause a problem |  | Bottom of the screen, centered (TBD) |
| Orange | Failure |
Action not allowed or Error | System errors or actions that failed to complete |  | Bottom of the screen, centered (TBD) |
| Red | |
Continuous Action | An action that takes more than 3 seconds (exact duration TBD) |  | Bottom of the screen, centered (TBD) |
| Blue |
Usage & Behaviour
General guidelines
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)
Structure
A toast may contain the following elements:
Icon, or An icon representing their type or, in case of a continuous action, an animated loader progress indicator
Text, e.g. "3 items deleted"
Action buttons and/or links, e.g. Undo
Close button
including a title (optional) and the body of the text
A closing button (x)
A Cancel button
An expand button (see below)
Placement and Positioning
All toasts appear at the bottom-left end of the screen.
Toasts have a fixed width. Text may wrap the to another row
The clickable area of the close button should be larger than the icon itself
Interaction
A toast may be closed by the user or disappear automatically after a few secondsheight of a toast depends on the amount of text it contains. In case of more than 3 lines a button will appear, allowing the user to expand the toast.
...
Interaction
Clicking the closing button closes the toast with a fade effect.
When shown, clicking the close 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 a link goes to the relevant page. Internal links opens the page on the same tab, while external links opens on a new tab
When shown, clicking a button performs the relevant action
Transitions
A toast will appear with a slide up effect and will disappear with a fade out effect (effects duration TBD)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 before the previous one disappeared:
If the new toast was the first error toast, it will appear at the bottom of the page, pushing other toasts upwards.
If the new toast was another error 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
...
In case another action occurred before the previous toast disappeared:
The new toast will push the previous toast upwards
If a lower toast disappears disappeared the upper toasts will move down respectively
...
<<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 >>
...