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

Usage & Behavior

...

A popup window consists of:

A a colored header, including:
- a label (see Content below).
- a close button (unless otherwise specified).
- a help button (optional).
A a content area, which contains:
- contains a title describing the action that will be performed.
- may contain the main content including any text, inputs and controls.
Buttons at the bottom of the popup, including:
- a primary action button.
- a secondary action button, if relevant.and other action buttons , if (where relevant).

The popup appears over a semi-transparent black background with an opacity of 40%.

...

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

...

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

...

the focus order will be from right to left.

...

If the content is not focusable, 1st the first item to get focus will be the Enter button.
The same order logic order as above should apply even if any none of the other additional buttons don’t appear.

Focus visual style on pop-up headers will have a different indication than The focus style for elements within the header will be different to other LUX components due to the background fill color:.

Help , Informative(grey), Information (blue), and Error (red) popups will use a white focus colorindicator.
The Warning pop-up Warning (orange) popups will use a black focus colorindicator.