Skip to end of banner
Go to start of banner

Toast

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 15 Next »

Related pages: Message Popups

Lead:  Liav Nadler ONGOING 


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

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

Zeplin linkScreen thumbnail
<<Zeplin Link>><<Screen with 200 width>>


Code

<<a box containing the code - discuss with Femi>>

  • No labels