Versions Compared

Key

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

Related pages: Message Popups

Lead:  Liav Nadler 

Status
colourYellow
titleongoing
 

Table of Contents

Description

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

Types

Type

Usage

Example

Position

Behaviour

Color

Info

General information about the action

Image Removed

Bottom of the screen, centered (TBD)

  • Appears from the bottom

  • disappears after 5 second (exact duration TBD)

Blue

Success

Action completed successfully

Image Removed

Bottom of the screen, centered (TBD)

  • Appears from the bottom

  • disappears after 5 second (exact duration TBD)

Green

Warning

Action caused or may cause a problem

Image Removed

Bottom of the screen, centered (TBD)

  • Appears from the bottom

  • disappears on clicking the close button

Orange

Failure

Action not allowed or failed to complete

Image Removed

Bottom of the screen, centered (TBD)

  • Appears from the bottom, disappears on clicking the close button

Red

Information

General information related to an action.

Image Added

Success

Actions that were completed successfully.

Image Added

Warning

System warnings or actions that may cause a problem.

Image Added

Error

System errors or actions that have failed to complete.

Image Added

Continuous Action

An action that takes more than 3 seconds

(exact duration TBD)Image Removed

Bottom of the screen, centered (TBD)

  • Appears from the bottom

  • Icon is animated - either spinner or progress (if applicable)

  • If the action lasts more than 10 seconds a Cancel button may appear (exact duration TBD)

  • Toast disappears after the action was completed or the user clicked the Cancel button

  • After the action completed another toast may appear to indicate the outcome of the action (e.g. success or failure)

Blue

Usage & Behaviour

General guidelines

  • A toast may contain the following elements:

    • Icon, or in case of a continuous action, animated loader

    • Text, e.g. "3 items deleted"

    • Action buttons and/or links, e.g. Undo

    • Close button

  • A toast will 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 seconds

  • When shown, clicking the close button closes the toast

  • 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)

Best practices

  • Keep the text short and informative

  • In case of warning or failure provide the user with a recommendation

Edge Cases

  • In case another action occurred before the previous toast disappeared:

    • The new toast will push the previous toast upwards

    • If a lower toast disappears the upper toasts will move down respectively

Open Issues

  • Behaviour across workspaces

  • Aggregating notifications

  • 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

...

.

Image AddedImage Added

Usage & Behavior

General guidelines

  • Toasts are triggered either by the user (e.g. refreshing a data table) or by the system (e.g. a server error).

  • Toasts appear from the bottom-left side of the screen using a slide effect.

  • Error toasts stay on the screen until the user actively closes them.

  • Other types of toast disappear automatically after a few seconds with a fade effect.

  • The user can always close a toast manually, even if it will automatically close.

Structure

A toast may consist of:

  • Either:

    • an icon representing the type of toast, such as a check mark or warning triangle, or

    • where there is a continuous action, an animated Progress Indicator.

  • Text, including:

    • a title (optional).

    • the message body.

  • A closing button (x).

  • A Cancel button, for continuous actions.

  • An expand button for longer messages (see Placement below).

Placement and Positioning

  • All toasts appear from the bottom-left side of the screen (using a slide effect).

  • Toasts have a fixed width.

  • The height of a toast depends on the amount of text it contains. Where there are more than 3 lines an expand button will appear, allowing the user to enlarge the toast.

Image Added

Image Added

Interaction

  • Mouseover a toast will keep it visible, even after exceeding the time limit before it disappears.

  • Clicking the closing button (x) closes the toast with a short fade effect.

  • When shown, clicking the Cancel button cancels the continuous action which has triggered the toast, and closes it. In this case, another information toast may appear, indicating that the action was canceled.

  • 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 Multiple Toasts below).

Multiple Toasts

  • Where a new toast appears before a previous one has been closed, the page will show multiple toasts.

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 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.

Image Added

Best practices

Use:

  • to display application-level messages, warnings, and errors.

  • when you need a relatively unobtrusive way to show messages, and to keep the rest of the page interactive.

Don’t use:

General

  • Keep the text short and informative.

  • For warning or error toasts, offer the user a way to recover.

Accessibility compliance

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

Design

Zeplin link

Screen thumbnail

<<Zeplin Link>>

<<Screen with 200 width>>

Code

...

Code

...