Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Related pages: Message Popups

Table of Contents

Description

A toast is a small message box that appears in response to a user action or system event. It contains simple feedback about the event, while any current activity remains visible and interactive.

Types

Type

Usage

Example

Information

General information related to an action.

Success

Actions that were completed successfully.

Warning

System warnings or actions that may cause a problem.

Image RemovedImage Added

Error

System errors or actions that have failed to complete.

Image RemovedImage Added

Continuous Action

An action that takes more than 3 seconds.

...

Condition

Behavior

Design

The new toast is not an error toast (i.e. info or success toasts etc.)

The new toast will appear on top, above all previous toasts.

Image Removed

Image Added

The new toast is the first error toast on the page.

The new toast will appear at the bottom, pushing all other toasts upwards.

The new toast is an additional error toast (there are other error toasts already on the page).

The new error toast will be stacked behind the existing error toasts. It should appear underneath and slightly above the previous error toasts, showing the first line of text. In this case:

  • The user can switch between toasts by clicking on the visible portion of each one.

  • Clicking a toast will move it to the front.

  • The closing button will appear only on the toast that’s on top.

  • Closing any toast except the top one will move the remaining group of toasts downwards.

...