Versions Compared

Version Old Version 6 New Version 7
Changes made by

Liav Nadler

Liav Nadler

Saved on

Key

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

Lead:  Liav Nadler 

Status
colourYellow
titleongoing
 

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.

A toast may be closed by the user or disappear automatically after a few seconds.Image Removed

Format

A toast may contain the following elements:

  • Icon - e.g. confirmation icon, warning icon etc. or , in case of a continuous action, animated loader
  • Text, e.g. "3 items deleted"
  • Action buttons and/or links (optional), e.g. Undo
  • Close button (optional)

Types

TypeUsageExamplePositionBehaviourColor
InfoGeneral information about the action

Image Modified

Bottom of the screen, centered (TBD)
  • Appears from the bottom
  • disappears after 5 second (exact duration TBD)
Blue
SuccessAction completed successfully

Image Modified

Bottom of the screen, centered (TBD)
  • Appears from the bottom
  • disappears after 5 second (exact duration TBD)
Green
WarningAction caused or may cause a problem

Image Modified

Bottom of the screen, centered (TBD)
  • Appears from the bottom
  • disappears on clicking the close button
Orange
FailureAction not allowed or failed to complete

Image Modified

Bottom of the screen, centered (TBD)
  • Appears from the bottom, disappears on clicking the close button
Red
Continuous ActionAn action that takes more than 3 seconds (exact duration TBD)

Image Modified

Bottom of the screen, centered (TBD)
  • Appears from the bottom
  • Loading icon is animated
  • 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

General guidelines

  • A toast will have a minimum and maximum fixed width. Exceeding the maximum length will Text may wrap the text to another row
  • A toast appears / disappears will appear with a 500 milliseconds slide up / slide down effect and will disappear with a fade out effect (exact effects duration TBD)
  • The clickable area of the close button should be larger than the icon itself

Interaction

  • When showsshown, 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

...

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

...