Related pages: Popups, Dialogs, Toast
Lead: Liav Nadler ONGOING
Description
A message popup is a Popup containing critical information such as a warning, error message, or help text.
Types
Type | Usage | 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 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).
a secondary action button (usually Cancel), if relevant.
(Optional) A checkbox, allowing the user to declare something, such as I understand or Don’t show this again. For example:
 |  |
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 scroll bar will appear.
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.
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 |
|---|---|
 | |
 |