...
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.
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 |
---|---|
...