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

Type	Usage	Image
Warning	A warning message informs the user about a potential problem, particularly one that could occur if the user continues with an action.	Open
Error	An error message informs the user about an error that has occurred.	Open
Information	An information message contains additional information relevant to the primary screen.
Help	A help message contains an explanation of any element within the primary screen.

Usage & Behavior

General guidelines

Structure

• For basic popup structure → see Popups.

• Message popups:

  • will have a type icon (e.g. warning icon) to the left of the title.

  • may contain a Checkbox, allowing the user to declare a statement such as I understand or Don’t show this again.

Dimensions

• Message popup have three possible dimensions: small, medium and large, depending on the amount of content.

• A small popup has a fixed width of 400px.
  In this case, the height of the popup may vary from 260px to 460px.

• A medium popup has a fixed of 500 px.
  In this case, the height of the popup may vary from 325px to 575px.

• A large popup has a fixed width of 600 px.
  In this case, the height of the popup may vary from 390px to 690px.

• If the content does not fit within the largest popup size, a scrollbar will appear.

Content

• Popup header will contain the name of the object that triggered it. See Popups for more information.

• The title can wrap up to two lines. Beyond that it will be truncated, showing an ellipsis (…). In this case, hovering over the title will show a tooltip with the full title.

Best practices

General

• Message popups are very intrusive. Only use them for important alerts or long help messages. For lower-priority messages → use a Toast.

• Keep the title short and informative. The title should not include the name of the entity.

• Keep the message text short and informative.

Use

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

Design

Code