Lead: Liav Nadler ONGOING
Related components: Toast, Dialog
...
A message popup is a small modal window containing a warning, error message, help text or other important information
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 may contains these elements:
- Header, including a title (e.g. "Warning") and a closing icon
- Message type icon Icon (e.g. question mark icon for help)
- The message text
- Primary action button (Usually OK)
- Cancel button (optionalwhen relevant)
- Transparent background?
Types
Type | Example |
|---|---|
| Help |
|
| Information |
|
| Warning |
|
| Error |
|
...
...
- 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
...
- 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
...