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.

Accessibility recommendation

Use aria-labelledby={headingId} to announce the flyout to screen readers.

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.

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.

warning

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.

Props

EuiFlyout


Prop	Description and type	Default value
Prop onClose#	Description and type Type: `(event: MouseEvent \| KeyboardEvent \| TouchEvent) => void`	Default value Required
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop as#	Description and type Sets the HTML element for `EuiFlyout` Type: `ElementType`	Default value
Prop size#	Description and type Defines the width of the panel. Pass a predefined size of `s \| m \| l`, or pass any number/string compatible with the CSS `width` attribute Type: `Width<string \| number>`	Default value `m`
Prop maxWidth#	Description and type Sets the max-width of the panel, set to `true` to use the default size, set to `false` to not restrict the width, set to a number for a custom width in px, set to a string for a custom width in custom measurement. Type: `string \| number \| boolean`	Default value `false`
Prop paddingSize#	Description and type Customize the padding around the content of the flyout header, body and footer Type: `"s" \| "m" \| "l" \| "none"`	Default value `l`
Prop ownFocus#	Description and type Adds an EuiOverlayMask and wraps in an EuiPortal Type: `boolean`	Default value `true`
Prop hideCloseButton#	Description and type Hides the default close button. You must provide another close button somewhere within the flyout. Type: `boolean`	Default value `false`
Prop closeButtonProps#	Description and type Extends EuiButtonIconProps onto the close button Type: `Partial<EuiButtonIconPropsForButton>`	Default value
Prop closeButtonPosition#	Description and type Position of close button. `inside`: Floating to just inside the flyout, always top right; `outside`: Floating just outside the flyout near the top (side dependent on `side`). Helpful when the close button may cover other interactable content. Type: `"inside" \| "outside"`	Default value `inside`
Prop maskProps#	Description and type Adjustments to the EuiOverlayMask that is added when `ownFocus = true` Type: `EuiOverlayMaskProps`	Default value
Prop type#	Description and type How to display the the flyout in relation to the body content; `push` keeps it visible, pushing the `<body>` content via padding Type: `"push" \| "overlay"`	Default value `overlay`
Prop outsideClickCloses#	Description and type Forces this interaction on the mask overlay or body content. Defaults depend on `ownFocus` and `type` values Type: `boolean`	Default value
Prop side#	Description and type Which side of the window to attach to. The `left` option should only be used for navigation. Type: `"left" \| "right"`	Default value `right`
Prop pushMinBreakpoint#	Description and type Named breakpoint (`xs` through `xl`) for customizing the minimum window width to enable the `push` type Type: `string`	Default value `l`
Prop pushAnimation#	Description and type Enables a slide in animation on push flyouts Type: `boolean`	Default value `false`
Prop style#	Description and type Type: `CSSProperties`	Default value
Prop focusTrapProps#	Description and type Object of props passed to EuiFocusTrap. `shards` specifies an array of elements that will be considered part of the flyout, preventing the flyout from being closed when clicked. `closeOnMouseup` will delay the close callback, allowing time for external toggle buttons to handle close behavior. Type: `Pick<EuiFocusTrapProps, "shards" \| "closeOnMouseup">`	Default value
Prop includeFixedHeadersInFocusTrap#	Description and type By default, EuiFlyout will consider any fixed `EuiHeader`s that sit alongside or above the EuiFlyout as part of the flyout's focus trap. This prevents focus fighting with interactive elements within fixed headers. Set this to `false` if you need to disable this behavior for a specific reason. Type: `boolean`	Default value

EuiFlyoutResizable

Extends HTMLAttributes


Prop	Description and type	Default value
Prop onClose#	Description and type Type: `(event: MouseEvent \| KeyboardEvent \| TouchEvent) => void`	Default value Required
Prop size#	Description and type Defines the width of the panel. Pass a predefined size of `s \| m \| l`, or pass any number/string compatible with the CSS `width` attribute Type: `Width<string \| number>`	Default value `m`
Prop style#	Description and type Type: `CSSProperties`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop side#	Description and type Which side of the window to attach to. The `left` option should only be used for navigation. Type: `"left" \| "right"`	Default value `right`
Prop maxWidth#	Description and type Type: `number`	Default value
Prop minWidth#	Description and type Type: `number`	Default value `200`
Prop type#	Description and type How to display the the flyout in relation to the body content; `push` keeps it visible, pushing the `<body>` content via padding Type: `"push" \| "overlay"`	Default value `overlay`
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop onResize#	Description and type Optional callback that fires on user resize with the new flyout width Type: `(width: number) => void`	Default value
Prop paddingSize#	Description and type Customize the padding around the content of the flyout header, body and footer Type: `"s" \| "m" \| "l" \| "none"`	Default value `l`
Prop closeButtonProps#	Description and type Extends EuiButtonIconProps onto the close button Type: `Partial<EuiButtonIconPropsForButton>`	Default value
Prop ownFocus#	Description and type Adds an EuiOverlayMask and wraps in an EuiPortal Type: `boolean`	Default value `true`
Prop hideCloseButton#	Description and type Hides the default close button. You must provide another close button somewhere within the flyout. Type: `boolean`	Default value `false`
Prop closeButtonPosition#	Description and type Position of close button. `inside`: Floating to just inside the flyout, always top right; `outside`: Floating just outside the flyout near the top (side dependent on `side`). Helpful when the close button may cover other interactable content. Type: `"inside" \| "outside"`	Default value `inside`
Prop maskProps#	Description and type Adjustments to the EuiOverlayMask that is added when `ownFocus = true` Type: `EuiOverlayMaskProps`	Default value
Prop outsideClickCloses#	Description and type Forces this interaction on the mask overlay or body content. Defaults depend on `ownFocus` and `type` values Type: `boolean`	Default value
Prop pushMinBreakpoint#	Description and type Named breakpoint (`xs` through `xl`) for customizing the minimum window width to enable the `push` type Type: `string`	Default value `l`
Prop pushAnimation#	Description and type Enables a slide in animation on push flyouts Type: `boolean`	Default value `false`
Prop focusTrapProps#	Description and type Object of props passed to EuiFocusTrap. `shards` specifies an array of elements that will be considered part of the flyout, preventing the flyout from being closed when clicked. `closeOnMouseup` will delay the close callback, allowing time for external toggle buttons to handle close behavior. Type: `Pick<EuiFocusTrapProps, "shards" \| "closeOnMouseup">`	Default value
Prop includeFixedHeadersInFocusTrap#	Description and type By default, EuiFlyout will consider any fixed `EuiHeader`s that sit alongside or above the EuiFlyout as part of the flyout's focus trap. This prevents focus fighting with interactive elements within fixed headers. Set this to `false` if you need to disable this behavior for a specific reason. Type: `boolean`	Default value
Prop as#	Description and type Sets the HTML element for `EuiFlyout` Type: `"div"`	Default value
Prop ref#	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: `LegacyRef<unknown>`	Default value

EuiFlyoutBody

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop banner#	Description and type Use to display a banner at the top of the body. It is suggested to use `EuiCallOut` for it. Type: `ReactNode`	Default value
Prop scrollableTabIndex#	Description and type Scrollable regions (or their children) should be focusable to allow keyboard users to scroll the region via arrow keys. By default, EuiFlyoutBody's scroll overflow wrapper sets a `tabIndex` of `0`. If you know your flyout body content already contains focusable children that satisfy keyboard accessibility requirements, you can use this prop to override this default. Type: `number`	Default value `0`

EuiFlyoutFooter

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value

EuiFlyoutHeader

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop hasBorder#	Description and type Type: `boolean`	Default value `false`

More complicated flyout

Sizing

Adjusting padding

Adding a banner

Without ownFocus

Push versus overlay

Understanding max-width

Resizable flyouts

Props

EuiFlyout

EuiFlyoutResizable

EuiFlyoutBody

EuiFlyoutFooter

EuiFlyoutHeader