Related pages: Popups, Dialog, Toast
Lead: Liav Nadler ONGOING
| Table of Contents |
|---|
Description
...
Usually it appears on user's action (e.g. clicking help icon) and it must be dismissed by the user
Types
Type | Example |
|---|---|
| Help |
|
| Information |
|
| Warning |
|
| Error |
|
Usage & Behaviour
General guidelines
The popup may contains these elements:
- Header, including a title (e.g. "Warning") and a closing icon
- Icon (e.g. question mark icon for help)
- The message text
- Primary action button (usually OK)
- Secondary action button (usually Cancel, when relevant)
- Don't show this again checkbox
Types
...
Type
...
Example
...
...
...
...
Usage & Behaviour
General guidelines
- For For basic popup usage and behaviour see popups
Validations and errors
N/A
Best practices
- The message popup is more intrusive than a toast. Use it only for important messages (or long messaged in the case of help)
- Keep the title short and informative
- Keep the message text short and informative
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
<<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 Keyboard & Focus Management Guidelines >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>
Contrast & size compliance
...
Design
Zeplin link | Screen thumbnail |
|---|---|
| <<Zeplin Link>> | <<Screen with 200 width>> |
Code
...