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, such as clicking a help icon. 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.
Dialogs	To collect information from the user, or to allow them to make decisions.

Usage & Behavior

General guidelines

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

Structure

A popup window may contain:

• A colored header, including:

  • a title.

  • a closing button (X)

  • a help button

• 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.

Placement and Positioning

• The popup is centered horizontally on the screen.

• The popup appears at 2/3 height of the screen.

• The user will be able to move the popup around the screen.

• The user cannot change the width or height of a popup window.

Content

The popup header may contain hard-coded text, a dynamic field, or a combination of both.

Interaction

• The popup can be closed by either clicking the close (X) button, or by clicking the primary or secondary action buttons.

• Clicking outside of the popup will not close it.

• For interactions within dialog boxes see Dialogs.

Validations and errors

• Message popups do not require special validations.

• See Dialogs for information on validations and errors for dialog popups.

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

Best practices

Use popups

• to display important information. Remember that popups can be intrusive

Do not use popups

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

• for less important or unintrusive messages. In this case, consider using Toasts

General

• Keep the text short and informative.

• Avoid nested popups.

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.