Modal

Basic modals give users the option to either confirm or cancel an action. To flag an open modal, use the isOpen property. To execute a callback when a modal is closed, use the onClose property.

To enable keyboard-accessible scrolling of a modal’s content, pass tabIndex={0} to the <Modal>.

To provide additional information about a modal, use the description property. Descriptions are static and do not scroll with other modal content.

To override a modal's default center alignment, use the position property. In this example, position is set to "top", which moves the modal to the top of the screen.

To adjust the size of a modal, use the variant property. Modal variants include "small", "medium", "large", and "default".

The following example displays a "small" modal by passing in variant={ModalVariant.small}.

The following example displays a "medium" modal by passing in variant={ModalVariant.medium}.

The following example displays a "large" modal by passing in variant={ModalVariant.large}.

To choose a specific width for a modal, use the width property. The following example has a width of "50%".

To add a custom header and footer to a modal, set the header and footer properties to a custom implementation. The following example passes title components into both the header and the footer and also passes an icon to the footer.

To exclusively present information in a modal, remove the header and/or footer.

To add an icon before a modal’s title, use the titleIconVariant, which can be set to one of the predefined variants -- "success", "danger", "warning", "info", and "custom" -- or to an imported custom icon. The following example uses a "warning" variant.

To add a custom icon before a modal’s title, set titleIconVariant to an imported custom icon. The following example imports and uses a bullhorn icon.

To guide users through a series of steps in a modal, you can add a wizard to a modal. To configure the <Wizard>, pass an array that contains a “name” and “component” value for each step into the steps property.

To present a menu of actions or links to a user, you can add a dropdown to a modal. To allow the dropdown to visually break out of the modal container, set the menuAppendTo property to “parent”. Handle the modal’s closing behavior by listening to the onEscapePress callback on the <Modal> component. This allows the "escape" key to collapse the dropdown without closing the entire modal.

To help simplify and explain complex models, add a help popover. Only place a help icon at the modal level if its information applies to all content in the modal. If the help popover is specific to a particular modal section, place the help icon beside that section instead.

To collect user input within a modal, you can add a form.

To submit the form from a button in the modal's footer (outside of the <Form>), set the button's form property equal to the form's id.

Use the elementToFocus property to customize which element inside the Modal receives focus when initially opened.