Related pages: Popups, Dialogs, Toast

Lead:  Liav Nadler ONGOING

Description

A message popup is a small modal window containing a warning, error message, help text or other important information

Types

Type	Example
Help
Information
Warning
Error

Usage & Behaviour

General guidelines

Structure

• The message popup may contains these elements:

  • 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

  • Primary action button (usually OK)

  • Secondary action button (usually Cancel) when relevant

  • In some cases a checkbox may appear. For example:

• For basic guidelines see Popups

Size

• The width of message popups is fixed

• The height of the popup may vary from a minimum of X pixels and up to 600 pixels, depending on the height of the content

• If the content is higher than its container, a scroll bar will appear

Best practices

• The message popup is more intrusive than a toast. Use it only for important messages (or long messaged in the case of help)

• Keep the title short and informative

• Keep the message text short and informative

• A common use is when the user tries to leave the page without saving his work. In this case, a warning popup will appear:

Design

Code