Modal
Modals are containers appearing in front of the main content to provide critical information or an actionable piece of content.

Modal is built on top of the Overlay component and display content centered on the screen. If you need to display content differently, you can try using Drawer or even Overlay directly.

Usage

Modal is a controlled component which means that it has an active property and multiple handlers that you can use to change the value of this property. Once Modal is active – it will prevent scrolling of the whole page and will just support scrolling for the content displayed inside the overlay.

Note: It's safe to just keep Modal in your render. They will be rendered in the DOM only if they're active and that will not conflict with Modal animation.

Sizes

Modal comes in 3 sizes: small, medium (default) and large while keeping at 100% width as its max value.

By default, Modal comes with paddings that is defined based on the Modal size. That's a nice default for the modal content but if you want to have full flexibility for its content composition – you can remove the padding by disabling the padded property.

To make the experience better, we're providing a useToggle hook that you can use together with Modal or other components that toggle states.

Composition

Modal supports Modal.Title and Modal.Subtitle compound components that take handle of the aria attributes and provide default text styles. You can use them together with a Dismissible utility to implement more complex modal layouts.

Accessibility

Modal traps focus inside its root element, which means that using any type of keyboard navigation will keep the focus inside the Overlay while it's opened.

Modal triggers its onClose handler on Esc key press.

Using Modal.Title and Modal.Subtitle will automatically apply aria-labelledby and aria-describedby attributes to the dialog element.

Properties

Modal properties:

NameTypeDefaultRequiredComment
activeboolean-false
sizesmall, medium, largemediumfalse
paddedbooleantruefalseDoes modal have content paddings?
onOpen() => {}-falseOverlay open handler
onClose() => {}-falseOverlay close handler
childrenReactNode, ({ active }) => ReactNode-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element

Modal.Title properties:

NameTypeDefaultRequiredComment
childrenReactNode-false

Modal.Subtitle properties:

NameTypeDefaultRequiredComment
childrenReactNode-false