Related pages: Popups, Dialogs, ToastLead: Liav Nadler Status
Lead: Liav Nadler
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
A message popup is a small modal window containing critical information such as a warning, error message, or help text or other important information.
Types
Type | Usage | Example |
|---|---|---|
Help |  | |
Information |  | |
Image | ||
Help | A help message contains an explanation of something relevant to the primary screen. Usually appears after a user clicks a help icon. | |
Information | An information message contains additional information about something relevant to the primary screen. | |
Warning | A warning message informs the user about a potential problem or error, particularly one that could occur if the user continues with an action. |  |
Error | An error message informs the user about an error that has occurred or may occur if the user continues with an action. |  |
Usage & Behaviour
General guidelines
Structure
The message popup may
...
Header, including a title (e.g. "Warning") and a closing icon
...
Title, including Icon (e.g. question mark icon for help) and text
...
The message text
...
contain:
A colored header, including:
a title, such as Warning.
a close button (X).
A content area, containing the message text.
Buttons, including:
a primary action button (usually OK).Secondary
a secondary action button (usually Cancel) when , if relevantIn some cases a checkbox may appear.
(Optional) A checkbox, allowing the user to declare something, such as I understand or Don’t show this again. For example:
...
For basic guidelines see Popups
Size
...
Placement and Positioning
Message popups have a fixed width.
The height of the popup may vary from a minimum of X pixels, and up to 600 pixels, depending on the height amount of the content.
If the content does not fit within the content is higher than its containerarea, a scroll bar will appear.
Best practices
The A message popup is more very intrusive than a toast. Use it only for important messages ( or long messaged in the case of help)help messages. For lower-priority messages → use a Toast.
Keep the title short and informative.
Keep the message text short and informative.
A common use is when the user tries to leave the a page without saving his their work. In this case, a warning popup will appear:
...