The following segment provides instructions for designers and developers regarding the appropriate utilization of this
component in various situations.
Do:
Use a Flyout as a temporary workspace that allows users to complete tasks without navigating to a new page.Use a Flyout for mobile navigation.Adjust Flyout size and alignment with the grid.Use the sticky header for a descriptive heading & optional sub-heading.Use the sticky footer for a call to action.Use the sub-footer slot for additional or less important information such as legals or faqs.Follow button order and positioning guidelines.Use feedback banner for any feedback related to the request.
Don't:
Don't use to many actions in the sticky footer or header.Don't put important information in the sub-footer slot.Don't use fullscreen Flyout's on desktop.Don't launch a Flyout within a Flyout.