Related pages: Message Popup
Lead: Liav Nadler Status colour Yellow title ongoing
| Table of Contents |
|---|
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.
A toast may be closed by the user or disappear automatically after a few seconds.
Format
A toast may contain the following elements:
...
.
...
...
Types
| Type | Usage | Example | Position | Behaviour | Color |
|---|---|---|---|---|---|
| Info | General information about the action |
| Bottom of the screen, centered (TBD) |
| Blue |
| Success | Action completed successfully |
| Bottom of the screen, centered (TBD) |
| Green |
| Warning | Action caused or may cause a problem |
| Bottom of the screen, centered (TBD) |
| Orange |
| Failure | Action not allowed or failed to complete |
| Bottom of the screen, centered (TBD) |
| Red |
| Continuous Action | An action that takes more than 3 seconds (exact duration TBD) |
| Bottom of the screen, centered (TBD) |
| Blue |
Usage & Behaviour
General guidelines
Structure
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
- A toast will appear with a slide up effect and will disappear with a fade out effect (effects duration TBD)
- 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
...
<<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 >>
...