Modal

• Overview
• Variants
• Props

Overview

Modal is a dialog that appears on top of the app’s content to provide critical information or ask for a decision. It appears in front of all screen content, typically as a result of an action. Modals are purposefully interruptive, so they should be used sparingly.

Variants

Simple modal

with simple content

Modal with customised trigger

You can pass custom trigger component to the modal. Be sure you forwarded ref to the trigger component to make it work.

Modal with custom width

You can pass custom width to the modal.

Modal with custom footer

You can pass custom footer to the modal.

Modal with nested modal

Nested modals will close respectively on escape key press or on click outside.

Modal with overflow scroll

When the content of the modal is too long, body will have overflow scroll.

Modal with select popups

Selects can be used in modal dialogs. While the modal is open, the select will be rendered on top of the modal and select will close first when escape key is pressed.

Unclosable modal

Modal will not close on escape key pressed or clicked outside. closable={false} prop can be used to toggle this behavior.

Props