Related pages: Popups, Dialogs, Toast
Description
A message popup is a Popup containing important information such as a warning, error message, or help text.
Types
Type | Usage | Image |
|---|---|---|
Warning | A warning message informs the user about a potential problem, 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. |  |
Information | An information message contains additional information relevant to the primary screen. |  |
Help | A help message contains an explanation of any content relevant to the primary screen. |  |
Usage & Behavior
General guidelines
Structure
For basic popup structure see Popups.
A message popup will have a title, next to a type icon (e.g. warning icon).
The message popup may contain a checkbox, allowing the user to declare a statement, e.g. I understand or Don’t show this again.
 |  |
Placement and Positioning
Message popups have a fixed width.
The height of the popup may vary from a minimum of 260 pixels, and up to 600 pixels, depending on the amount of content.
If the content does not fit within the content area, a scrollbar will appear.
Content
Popup header will contain the name of the object that triggered it (see Popups for more information).
The title can wrap up to two lines. Beyond that it will be truncated, showing an ellipsis (…). In this case, hovering over the title will show a tooltip with the full title.
Best practices
A message popup is very intrusive. Use it only for important messages or long help messages. For lower-priority messages use a Toast.
Keep the title short and informative. The title should not include the actual name of the entity.
Keep the message text short and informative.
A common use is when the user tries to leave a page without saving their work. In this case, a warning popup will appear:
Design
Zeplin link | Screen thumbnail |
|---|---|
 |