Related pages: Message Popups

Description

A toast is a small message box that appears in response to users 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).

• 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 a few seconds with a fade effect (the user can still close them manually)

Structure

• A toast may consist of the following elements:

  • An icon representing 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)

Placement and Positioning

• All toasts appear at the bottom-left 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 an expand button will appear, allowing the user to expand the toast.

Interaction

• 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 it. 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 toasts appeared before previous ones were closed or disappeared, the page will show multiple toasts:

Condition	Behaviour	Design
In case the new toast is not an error toast (i.e. info toast, success toast etc.)	it will appear on top, above all previous toasts
In case the new toast is the first error toast on the page	it will appear at the bottom, pushing all other toasts upwards
In case the new toast is an additional error toast (not the first one on the page)	it will appear behind and slightly above the previous error toast. In this case: - The user can switch between toasts by clicking on the visible portion of it. - Clicking a toast will move it to the front. - The closing button will appear only on the toast that’s on front. - Closing any toast except the top one will move the remaining group of toasts downwards.

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 toasts offer the user a way to recover

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design

Code