Flyout
Readme
A non-modal overlay, showing contextually relevant content. Read more.
Example 1: Click Activated
A click activated flyout (i.e. launched using a button) is the recommended way to open a custom flyout.
Any kind of HTML control can go inside of a flyout...
A link: www.ebay.com
A button:
An input:
A checkbox:
Example 2: Hover Activated (discouraged)
Keyboard users cannot hover; as a workaround, a click-activated stealth button is available immediately after the link (appears on keyboard focus).
Any kind of HTML control can go inside of a flyout...
A link: www.ebay.com
A button:
An input:
A checkbox:
Example 3: Focus Activated (discouraged)
This pattern is discouraged because it forces a keyboard user to navigate through all interactive items of the flyout. The exception here would be if there is an aria-activedescendant relationship with the flyout content (e.g. a combobox).
Any kind of HTML control can go inside of a flyout...
A link: www.ebay.com
A button:
An input:
A checkbox:
Example 4: Hover and Focus Activated (discouraged)
This pattern is discouraged because it forces a keyboard user to navigate through all interactive items of the flyout.
Any kind of HTML control can go inside of a flyout...
A link: www.ebay.com
A button:
An input:
A checkbox:
Updated: March 24th, 2020