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. 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 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.
...
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 to display unintrusive messages. In this case, consider using Toasts.
General
Keep the text short and informative.
Avoid nested multiple level popups.
Accessibility compliance
...