Modal

Basic modals

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.

Scrollable modals

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

With a static description

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

Top aligned

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.

Small modal

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}.

Medium modal

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

Large modal

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

Custom width

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

Custom header and footer

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.

No header or footer

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

Title icon

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 "default" -- or to an imported custom icon. The following example uses a "warning" variant.

Custom title icon

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.

With wizard

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.

With dropdown

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.

With help

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.

With form

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.