Flyout

Flyout is a user interface pattern in which a panel or window appears to fly out from a trigger control, sliding into view and overlaying part of the main content. The content is usually contextual or supplementary, and the flyout is designed to be temporary and non-blocking, allowing users to access additional options without leaving the current screen.

Typically anchored to a specific control, flyouts can emanate from the side, bottom, or edge of the viewport. They are distinct from dropdown menus by presenting more complex content and from modal dialogs by not preventing interaction with the underlying page.

Interaction and accessibility: a flyout can be opened by mouse, touch, or keyboard focus. It should include a clear dismissal mechanism and return focus to the triggering element when closed. Keyboard users should be able to navigate the content, with Escape or clicking outside closing the panel. Proper aria labeling and focus management are important to ensure assistive technologies convey the correct context.

Design considerations: keep the content concise, provide a clear purpose, and avoid obstructing critical tasks. Use consistent placement, visible handles or indicators, and smooth but unobtrusive motion. Ensure appropriate contrast and responsive behavior for different screen sizes and input methods. Performance considerations include lightweight rendering and avoiding heavy animations that hinder usability.

Variants and usage: in many design systems, flyouts are called panels, drawers, popouts, or callouts. They are commonly used for contextual actions, filters, or settings in web, mobile, and desktop applications.