Flyout
EuiFlyout is a fixed position panel that pops in from the side of the window. It should be used to reveal more detailed contextual information or to provide complex forms without losing the user's current state. It is a good alternative to modals when the action is not transient.
Like modals, you control the visibilty of the flyout using your own state management,
but EuiFlyout requires an onClose handler for it's internal dismiss buttons.
Use aria-labelledby={headingId} to announce the flyout to screen readers.
More complicated flyout
This component also comes with related child components for ease of creating headers, footers and scrolling body content. EuiFlyoutHeader and EuiFlyoutFooter are pinned to the top and bottom of the flyout, respectively, to allow for always visible navigation and actions. The EuiFlyoutBody component will then automatically overflow.
Sizing
Flyouts come in three predefined sizes of 's' | 'm' | 'l', which define the width relative to the window size
with a minimum width defined in pixels. You can otherwise supply your own fixed width in number or string format.
Adjusting padding
All the inner flyout components inherit their padding from the wrapping EuiFlyout component.
This ensures that all the horizontal edges line up no matter the paddingSize. When using the "none" size,
you will need to accommodate your content with some other way of creating distance to the edges of the flyout.
Adding a banner
To highlight some information at the top of a flyout, you can pass an EuiCallOut
to the banner prop available in EuiFlyoutBody and its layout will adjust appropriately.
Without ownFocus
Like modals, you will usually want to obscure the page content beneath with ownFocus which wraps the flyout
with an EuiOverlayMask . However, there are use-cases where flyouts present more
information or controls, but need to maintain the interactions of the page content. By setting ownFocus={false},
the underlying page content will be visible and clickable.
Push versus overlay
Another way to allow for continued interactions of the page content while a flyout is visible,
is to change the type from overlay to push.
A pushed flyout still positions itself as fixed, but adds padding to the document's body element to accommodate
for the flyout's width. Because this squishes the page content, the flyout changes back to overlay
at smaller window widths. You can adjust this minimum breakpoint with pushMinBreakpoint.
Push flyouts require manual accessibility management
Push flyouts do not use a focus trap, do not close on Escape keypress, do not inherit a dialog role, and do not include any of the default screen reader guidance that overlay flyouts contain out-of-the-box.
Please be cautious when using push flyouts, and make sure you are managing your own focus and screen reader UX.
Understanding max-width
By default, flyouts will continue to grow with the width of the window.
To stop this growth at an ideal width, set maxWidth to true, or pass your own custom size.
Note that there are some caveats to providing a maxWidth that is smaller than the minWidth.
Resizable flyouts
You can use EuiFlyoutResizable to render a flyout that users can drag with their mouse or use arrow keys to resize. This may be useful for scenarios where the space the user needs can be unpredictable, if content is dynamic. Resizable flyouts allow users to adjust content to better fit their individual screens and workflows.
We strongly recommend setting reasonable numerical minWidth and maxWidth props based on the flyout content and page content that you can predict.