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)

Structure

A toast may contain the following elements:
- An icon representing their 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)

Placement and Positioning

All toasts appear at the bottom-left end 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 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 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 additional toasts appeared before previous ones were closed or disappeared the page will show multiple toasts:

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
is an additional error toast (the 2nd, the 3rd etc…)	it will stack behind the previous error toast. In this case: - the user can switch between toasts by clicking on the visible portion of it. - the closing button will appear only on the fully visible toast - closing the bottom or a middle toast will move the remaining group of toasts downwards

Best practices

Keep the text short and informative
In case of warning or failure provide the user with a recommendation

Open Issues

Behaviour across workspaces
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

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

Zeplin link	Screen thumbnail
<<Zeplin Link>>	<<Screen with 200 width>>

Code

<<a box containing the code - discuss with Femi>>