Modal

A modal appears as a layer on top of the primary interface. Modals disrupt users from interacting with the page until they complete a specific task. Modals Design Guidelines.

Edit the code below to see your changes live!

Dialog

Setting the variant prop to dialog results in a simplified version of a Modal. The purpose of a dialog is to act as a safety net for a user attempting a destructive action. Modals–Confirmation Design Guidelines.

Edit the code below to see your changes live!

API

Modal

Prop NameTypeDefaultDescription
isOpen *booleanDetermines if the modal/dialog is open.
onClose *() => voidFunction that will be called on close events.
backdropbooleantrueDetermines if the backdrop is shown.
closeOnClickOutsidebooleanfalseControls whether onClose is called when clicking outside of the modal.
closeOnEscKeybooleantrueControls whether onClose is called when pressing the ESC key.
variantmodal | dialogmodalDetermines the modal variant.

Props ending with * are required

Modal.Header

Prop NameTypeDefaultDescription
withBorderbooleanfalseDetermines if the header bottom border is shown.

Props ending with * are required

Modal.Actions

Prop NameTypeDefaultDescription
withBorderbooleanfalseDetermines if the actions top border is shown.

Props ending with * are required

Beta