Lead: Liav NadlerStatus colour Yellow title ongoing
| Table of Contents |
|---|
Description
<< 1-2 lines short description of the component and when it is used>>
<< Most communicative 1 screen shot of the component >>
<<Types>>
<<use this section only if the component has several types that each requires its own page e.g. table, collapsable table>>
<<If you are using this section, then Usage & Behaviour should be used only for the Common functionalities in the page>>
...
Usage & Behaviour
<<use a visual for each sub-section>>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), e.g. confirmation, warning etc.
- A loader, in case of a continuous action (optional)
- Text, e.g. Item deleted
- Action button (optional), e.g. Undo
- Close button (optional, see below)
Types
| Type | Example | Usage | Position | Behaviour | Leading Color | Disappears Automatically |
|---|---|---|---|---|---|---|
| Standard | General information about the action | Bottom of the screen, centered | Appearing from the bottom | Blue | After 5 seconds | |
| Confirmation | 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 | Red | Requires user action |
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
<<How will the component work with keyboard only - without a mouse. Can be reference if written above
We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>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 >>
...