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 23 Next »

Related pages: PopupsDialogsToast


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

  • Message popups have a fixed width. The height of the popup may vary in regard to the length of the text

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

Design

Zeplin link
Screen thumbnail
<<Zeplin Link>><<Screen with 200 width>>


Code

  • No labels