Flyouts

Usage

A Flyout is a panel that slides in from the right edge of the page to surface supplementary content, detail, or actions. Unlike a Dialog, a Flyout does not always fully interrupt the user — it can sit alongside the page, keeping context visible while the user works.

Use a Flyout when:

• The user needs to view or edit details about an item without navigating away from the current page
• The task is secondary and supports what the user is already doing
• Keeping the underlying page visible adds meaningful context

Anatomy

A Flyout is made up of a header, a scrollable content area, and an optional footer.

1. Header: Displays the flyout title and houses the expand/collapse toggle and close button.
2. Content area: The main body of the flyout. This area scrolls independently when content is long.
3. Footer (optional): A pinned area at the bottom, best used for persistent actions like Save or Cancel. The footer only appears when content is provided for it.

Types

Overlay

The default type. The flyout slides in over the page content with a semi-transparent backdrop behind it. Clicking the backdrop dismisses the flyout.

Best for focused tasks where the user should complete an action before returning to the page.

Inline

The flyout slides in alongside the page content rather than over it. The page shifts to the left to make room for the panel, keeping everything in view.

Best for browsing and editing workflows where the user benefits from seeing the page and the flyout at the same time — for example, selecting a record from a list while reviewing its details in the panel.

States

Expanded

The flyout can expand to fill the full width of the page. An expand/collapse toggle in the header lets users control this themselves.

On smaller screens, overlay flyouts expand automatically to fill the available space.

Behavior

Opening and closing

A Flyout has a built-in close button in the header. In overlay mode, clicking the backdrop also dismisses it.

Only one flyout can be open at a time. If a second flyout is triggered, the first closes automatically.

Scrolling

When the flyout's content is longer than the visible area, the content area scrolls while the header and footer remain fixed. This ensures the title and any actions are always accessible.

Best practices

• Use a Flyout for supplementary or contextual content — not as a replacement for a dedicated page.
• Keep the header title concise so it does not wrap to a second line.
• Place primary actions (Save, Apply) in the footer so they remain visible as users scroll through long content.
• Use overlay mode for short, focused tasks. Use inline mode when the user benefits from seeing the page alongside the panel.
• If the flyout contains a form, disable backdrop dismissal to prevent users from accidentally losing unsaved changes.
• Avoid using a Flyout within a Dialog.

Alternate considerations

• Use a Dialog when you need to fully interrupt the user with a required decision or confirmation.
• Use a Popover for lightweight contextual information that does not need a dedicated panel.
• Consider a separate page when the content or workflow is complex enough that it warrants its own focused view.