Lead: Liav Nadler ONGOING
...
Usually it appears on user's action (e.g. clicking help icon) and it must be dismissed by the user before going back to the application
The popup contains of these elements:
- Header, including the a title (e.g. "Warning") and a close closing icon
- Message type icon (e.g. question mark icon for help)
- The message text
- Primary action button (Usually OK)
- Cancel button (optional)
- Transparent background?
Types
Type | Example |
|---|---|
| Help |
|
| Information |
|
| Warning |
|
| Error |
|
...
Interaction
- The user can dismiss the popup by either clicking the X icon on the upper-right corner or by clicking the OK button
- When relevant, clicking the OK button also perform the primary action, e.g. deleting a component. In this case a toast may appear to confirm that the action completed successfully
- When relevant, clicking the Cancel button closes the popup without performing any other action
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 message 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>>
...