Versions Compared

Version Old Version 13 New Version 14
Changes made by

Liav Nadler

Liav Nadler

Saved on

Key

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

Related pages: Message PopupPopups

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.


Types

TypeUsageExamplePositionBehaviourColor
InfoGeneral information about the action

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

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

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

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)

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

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 rowA toast will appear with a slide up effect and will disappear with a fade out effect (effects duration TBD)
  • 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

...

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

...