A modal displays content that temporarily blocks interactions with the main view of a site.


This section is intended as a reference for specific use cases of components, or compositions of them, that are not covered in the component's default examples.



A standard modal.


A modal can reduce its complexity.

Top Aligned

A modal can be top aligned.

Scrolling Modal

When your modal content exceeds the height of the browser the scrollable area will automatically expand to include just enough space for scrolling, without scrolling the page below.

<Modal.Content image /> requires an image with wrapped markup: <Image wrapped />

Multiple Modals

Multiple modals can be displayed on top of one another.


A modal can be a controlled component.


A modal can be created with shorthand props.



A modal can vary in size.

Scrolling Content2.2.11

A modal can use the entire size of the screen.

Dimmer Variations

A modal can specify dimmer variations.

Close Config

Modal can config not to close by escape or dimmer click.

A Modal can have a close icon.

This is the bottom