Related Pages: Message Popups, Dialogs

Description

A popup is a small window which appears over the primary screen, designed to display important information or collect information from the user.

Popups appear as a result of a user action, such as clicking a button, a link or a menu action.

Popups must be dismissed by the user before returning to the primary screen.

Types

Type	Usage	Example
Message Popups	Displaying warnings, error messages, and important information.
Dialogs	Collecting information from the user, or allowing them to make decisions.

Usage & Behavior

General guidelines

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

Structure

A popup window consists of:

• A colored header, including:

  • a title.

  • a close button (unless otherwise specified).

  • 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 black background with an opacity of 40%.

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

• Message headers will describe the object they are referring to (for example: Shifts). In some cases they may also contain the actual names of the entities (for example: Car Insurance evaluation form).

• Dialog headers may describe the object they are referring to, or display action names (for example: Save as…)

• if the header text exceeds the container’s width it will be truncate, showing an ellipsis (…). In this case, hovering over the header will open a tooltip showing the full header text.

• In rare cases, button labels may change as a result of a user action.

Interaction

• The popup can be closed by either:

  • clicking the close (X) button,

  • clicking the primary or secondary action buttons, or

  • pressing the Esc key.

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

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

Best practices

Use

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

Do not use

• 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 opening a popup from another popup.

Accessibility compliance

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

Focus management

The tab index flow will follow the order displayed below. Shift + Tab will follow the reverse order.

In case there are more than 2 dialog buttons at the bottom of the popup, see example below:

• If the content is not focusable, 1st item to get focus will be the Enter button.

• The same logic order as above should apply even if any of the other buttons don’t appear.

Focus visual style on pop-up headers will have a different indication than other LUX components due to the background fill color:

• Help, Informative, and Error will use a White color F/ocus

• The warning pop-up will use a Black color Focus

Design

See Message Popups and Dialogs.

Code

See Message Popups and Dialogs.