Modal

A modal works best for focusing users' attention on a short amount of content and getting them to make a decision, such as a

confirmation. Use it to temporarily interrupt a user’s current task and block interactions to the content below it.

If your modal content is more complex, or requires considerable time to complete, consider using an EuiFlyout instead.

Each EuiModal requires a specific set of nested child components. They can be omitted if necessary, but the order cannot be changed or interrupted.

Modals come a wrapping EuiOverlayMask to obscure the content beneath, but unlike flyouts, modals cannot be dismissed by clicking on the overlay mask. This is inline with our modal usage guidelines which requires there to be a primary action button, even if that button simply closes the modal.

Loading...

Forms in a modal

Since the child components of EuiModal are required to be in a specific order, you can only wrap the contents within EuiModalBody with the

<form /> element. You can then hook up your submit button inside EuiModalFooter by adding the id of the <form /> element to the form prop of the button.

Loading...

Widths

Modals start with a minimum width of 400px, just enough to display form rows. They will grow to fit the contents until it reaches the specified maxWidth, the default of which is set to the medium breakpoint.

If the modal is not growing wide enough to fit your contents, you can pass a specific style.width, just remember that modals will always shrink to fit the window width.

Loading...

Props

EuiModal

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop children# ↦	Description and type ReactNode to render as this component's content Type: ReactNode ↦	Default value Required ↵
Prop onClose# ↦	Description and type Type: (event?: any) => void ↦	Default value Required ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop maxWidth# ↦	Description and type Sets the max-width of the modal. Set to true to use the default (euiBreakpoints 'm'), 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 true ↵
Prop initialFocus# ↦	Description and type Specifies what element should initially have focus. Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node. Type: string | HTMLElement | (() => HTMLElement) ↦	Default value ↵
Prop role# ↦	Description and type Identifies a modal dialog to screen readers. Modal dialogs that confirm destructive actions or need a user's attention should use "alertdialog". Type: "dialog" | "alertdialog" ↦	Default value dialog ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵

𐘂𐘂

EuiModalHeader

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 ↵

𐘂𐘂

EuiModalHeaderTitle

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop size# ↦	Description and type Type: "xs" | "s" | "m" | "l" | "xxxs" | "xxs" ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop id# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	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 textTransform# ↦	Description and type Type: "uppercase" ↦	Default value ↵
Prop component# ↦	Description and type The tag to render. Can be changed to a lower heading level like h2 or a container div. Type: ElementType ↦	Default value h1 ↵

𐘂𐘂

EuiModalBody

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 ↵

𐘂𐘂

EuiModalFooter

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 ↵

𐘂𐘂