The flyout notice pattern is a system-activated flyout. It draws the user's attention to a specific element or region on the page.
A flyout notice is typically classified as either high or low priority.
An error that prevents an action or task is high-priority, anything else can be considered low priority.
A flyout notice example is in progress. Check back again soon.
For a real world example, you can also see the pattern in action over on eBay Skin.
- the composite pattern as a *whole*, containing an overlay and it's host
- the element that *hosts* the overlay
- the non-modal overlay that contains the content related to it's host
- the overlay state (visible or hidden)
Overlay must contain a button to dismiss the flyout.
Overlay must remain on screen until explicitly dismissed by user.
Please refer to the flyout pattern for all inherited best practices.
This section provides guidance for keyboard, screen reader and pointing devices.
Please refer to the flyout pattern for all inherited keyboard interactions.
If high-priority, notice must be announced.
If high-priority, notice must be listed as a region/landmark.
Please refer to the flyout pattern for all inherited screen reader interactions.
Please refer to the flyout pattern for all inherited pointer interactions.
Developer guide coming soon.