...
Type | Usage | Example |
|---|---|---|
Displaying warnings, error messages, and important information. |   | |
Collecting information from the user, or allowing them to make decisions. |  |
...
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. (Optional for Dialog popups only, where space is limited).
the main content including any text, inputs and controls.
Dialog buttons at the bottom of the popup, including:
a primary action button.
a secondary and other action buttons (where relevant).
...
Help (grey), Information (blue), and Error (red) popups will use a white focus indicator.
Warning (orange) popups will use a black focus indicator.
 |  |   |  |
Responsive design
...
Examples at different screen sizes
Wide (1920px) | Standard (1366px) | Narrow (960px) |
|---|---|---|
%201920.png?version=1&modificationDate=1716553944586&cacheVersion=1&api=v2&width=448) | %201366.png?version=1&modificationDate=1716553944628&cacheVersion=1&api=v2&width=406) | %20960.png?version=1&modificationDate=1716553944647&cacheVersion=1&api=v2&width=368) |
 |  |  |
Design
See Message Popups and Dialogs.
...