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.
Format
A toast may contain the following elements:
...
| 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
| Red | On clicking the X |
General guidelines
...
<<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 >>
...