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 Name
Type
Default
Description
actionsobject[]

Accepts an array of objects with Button props and an additional text prop. See example for usage.

backdropbooleantrue

Determines if the backdrop is shown.

closeOnClickOutsidebooleanfalse

Controls whether onClose is called when clicking outside of the modal.

closeOnEscKeybooleantrue

Controls whether onClose is called when pressing the ESC key.

headerstring

Sets visible text that describes the content of the modal.

isOpen *boolean

Determines if the modal/dialog is open.

onClose *() => void

Function that will be called on close events.

variantmodal | dialogmodal

Determines the modal variant.

Props ending with * are required

Beta