Lead: Liav NadlerStatus colour Yellow title ongoing
| Table of Contents |
|---|
Description
A toast is a small message box that appears in response to a user's 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 few seconds (see below).
Format
A toast may contain the following elements:
- A relevant icon (optional)Icon, e.g. confirmation, warning etc. A loaderor, in case of a continuous action, animated loader (optional)
- Text, e.g. Item deleted
- Action button (optional), e.g. Undo (optional)
- Close button (optional, see below)
Types
| Type | Example | Usage | Position | Behaviour | Leading Color | Disappears |
|---|
| Info |
| General information about the action | Bottom of the screen, centered | Appearing from the bottom | Blue | After 5 seconds |
| Success |
| Success message after completing an action | Top of the screen, centered | Appearing from the top | Green | After 5 seconds |
| Warning | Failure to complete the action | Top of the screen, centered | Appearing from the top |
| Orange | On clicking the X | |||||
| Failure | Yellow | On clicking the X |
General guidelines
<<describes the component, use sub-section when they are relevant to the components>>
...
<<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 >>
...