Skip to end of banner
Go to start of banner

Message Popups

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 65 Next »

Related pages: PopupsDialogsToast

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.

  • 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

https://zpl.io/bP6mg6V

Code


  • No labels