Modal
A modal works best for focusing users' attention on a short amount of content and getting them to make a decision. 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.ExamplesGuidelines
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.
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.Confirm modal
Use the EuiConfirmModal to ask the user to confirm a decision. It is a contextual wrapper around EuiModal
that provides some helpful props for filling in common modal pieces. By default, the button color indicates a positive
or neutral action. Change the buttonColor property to danger to indicate a destructive action.
Loading and disabling confirm button
EuiConfirmModal supports being able to apply loading and disabled states to the confirm button
with the confirmButtonDisabled and isLoading props respectively. This is helpful to indicate the fetching
of data and/or to wait for a user's input before enabling the confirm action.
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.