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 |
|---|---|---|
Displaying warnings, error messages, and important information. |  | |
Collecting information from the user, or allowing them to make decisions. |  |
Usage & Behavior
General guidelines
Structure
A popup window consists of:
a colored header, including:
a label (see Content below).
a close button (unless otherwise specified).
a help button (optional).
a content area, which contains:
a title describing the action that will be performed.
the main content including any text, inputs and controls.
Buttons at the bottom of the popup, including:
a primary action button.
a secondary and other action buttons (where 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 vertical centre of the popup should be aligned to 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
Popup header labels should describe the object they are referring to, and may including the following information:
Object name - a specific label for the individual item the popup relates to, e.g. Agent Name, Article Title, or Timestamp.
Object type - the class of item, for example an Interaction, Article, or Shift.
Object type should be included for all Add New popups.
When object name and type are both used, it should be in the format [Object type]: [Object name], e.g. Interaction: 07/28/2023 04:49:25 AM.
Additional object metadata - such as timestamps, user type etc. Each additional piece of metadata should be separated using a divider, e.g. Interaction: Agent name | 07/28/2023 04:49:25 AM | Agent role.
Where a popup does not relate to an object, its header label should be the name of the tool or a message title instead, e.g. Calculator.
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.
Dialog popups may contain additional interactive elements.
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.
Where there are more than two dialog buttons at the bottom of the popup, the focus order will be from right to left.
If the content is not focusable, the first item to get focus will be the Enter button.
The same order logic as above should apply even if none of the additional buttons appear.
The focus style for elements within the header will be different to other LUX components due to the background fill color.
Help (grey), Information (blue), and Error (red) popups will use a white focus indicator.
Warning (orange) popups will use a black focus indicator.
 |  |  |  |
Design
See Message Popups and Dialogs.
Code
See Message Popups and Dialogs.