Versions Compared

Version Old Version 4 New Version 5
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 's 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. 

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 (optional)
  • Text, e.g. Item deleted"3 items deleted"
  • Action button buttons and/or links (optional), e.g. Undo (optional)
  • Close button (optional)

Types

TypeUsageExample
Usage
PositionBehaviour
Leading
Color
Disappears
Info

Image Removed

General information about the action

Image Added

Bottom of the screen, centered
Appearing
  • Appears from the bottom
  • disappears after 5 second (exact duration TBD)
Blue
After 5 secondsTop
Success

Image Removed

Success message after completing an action
Action completed successfully

Image Added

Bottom of the screen, centered
Appearing
  • Appears from the
topTop
  • bottom
  • disappears after 5 second (exact duration TBD)
Green
After 5 secondsWarningFailure to complete the action
WarningAction caused or may cause a problem

Image Added

Bottom of the screen, centered
Appearing
  • Appears from the
topOrangeOn
  • bottom
  • disappears on clicking the
X
  • close button
Orange
Failure

Image Removed

RedOn clicking the X

General guidelines

<<describes the component, use sub-section when they are relevant to the components>>

Expand
titleExample for heading in general

<<use heading 3>>

  • Text (Headings, labels, microcopty, help text Etc..) ( how to write microcopy for that component. For example, in lists the list items must be grammatically parallel and don’t mix active and passive voice etc)
  • Format / structure (describe the objects the component is made of and are optional e.g. search bar in a table) (for search component include - variations, results)(for tabs - Number of tabs)
  • Content (for example, in dropdowns and lists)
  • Length (e.g. length of list)
  • Order (e.g. order of drop down menu)
  • Placement or Positioning (when this is important, e.g. toast message)
  • Internal Logic (when explaining how to use different components inside the current component. For example, when to use radio buttons, checkboxes, and fields in a form)
  • Default section or Default values 

States

<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>

Interaction

<<for example, how to change a value – type, arrows, use slider>>

<<use Click target to describe the interaction>>

Validations and errors

<<used for specific components e.g. slider>>

Best practices

...

Action not allowed or failed to complete

Image Added

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

Image Added

Bottom of the screen, centered
  • 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 width. Exceeding the maximum length will wrap the text to another row
  • A toast appears / disappears with a 500 milliseconds slide up / slide down effect (exact duration TBD)
  • The clickable area of the close button should be larger than the icon itself

Interaction

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

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

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

...