Related pages: Message Popups

Lead:  Liav Nadler 

Description

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

Types

Type	Usage	Example
Info	General information related to an action
Success	Actions that were completed successfully
Warning	System warnings or actions that may cause a problem
Error	System errors or actions that failed to complete
Continuous Action	An action that takes more than 3 seconds (exact duration TBD)

Usage & Behaviour

General guidelines

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

• Toasts appear from the left side of the screen with a slide effect.

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

• Other toasts disappear automatically after a few seconds with a fade effect (the user can still close them manually)

...

• Keep the text short and informative

• In case of warning or failure toasts offer the user a way to recover

Open Issues

• Behaviour across workspaces

• 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>>Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design

...