Related Pages: Message Popups, Dialogs
| Table of Contents |
|---|
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 |
|---|---|---|
To display warnings, error messages, and important information. |  | |
To collect information from the user, or to allow them to make decisions. |  |
...
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.
...
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.
...
A common usage is to have the object that the popup refers to as a title, for example: TBD
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.
...
to display a large amount of content. In this case, link to another page or, in case of a dialog, consider using a form Form.
for less important or unintrusive messages. In this case, consider using toasts Toasts
General
Keep the text short and informative.
Avoid nested popups.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
See Message Popups and Dialogs.
Code
See Message Popups and Dialogs.