Related Pages: Message Popups, Dialogs

Description

A popup is a window which appears over the primary screen. It usually appears as a result of a user action. A popup must be dismissed by the user before returning to the primary screen.

Types

Type	Usage	Example
Message Popups	To display warnings, error messages, and important information.

Image Removed

Image Added
Dialogs	To collect information from the user, or to allow them to make decisions.	Image Modified

Usage & Behavior

General guidelines

• A popup window usually appears as a result of a user action, such as clicking a button, icon, or link.

Structure

A popup window consists of:

• A colored header, including:

  • a title.

  • a closing button (X).

  • a help button (optional).

• A content area, which may contain text, inputs and controls.

• Buttons, including:

  • a primary action button.

  • a secondary action button, if relevant.

  • other action buttons, if relevant.

The popup appears over a semi-transparent background.

...

• Message popups do not require special validations.

• For information about dialogs validations, see Dialogs.

Transitions

• The semi-transparent background will appear and disappear with a fade effect.

• The popup window itself will appear and disappear with a fade effect.

...

• to display a large amount of content. In this case, link to another page or, in case of a dialog, consider using a Form.

• to display unintrusive messages. In this case, consider using Toasts.

General

• Keep the text short and informative.

• Avoid multiple level popupsopening a popup from another popup.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

See Message Popups and Dialogs.

Code

See Message Popups and Dialogs.