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 |
---|---|---|
Help | A help message contains an explanation of any content relevant to the primary screen. | |
Information | An information message contains additional information relevant to the primary screen. | |
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. |
Usage & Behavior
General guidelines
Structure
For basic popup structure see Popups.
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. This can be either a noun or a verb.
The least destructive action will be default button, located on the right-end of the popup.
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 |
---|---|