Modals are great way to add a speedbump before a user takes an action.

Confirmation Modal

Text rendered in the primary button. Defaults to `"Confirm"`

buttonText

string

Callback fired when the cancel button is clicked.

onCancel

() => void

Callback fired when the primary action button is clicked.

onConfirm

The component is shown when the value is set to `true`.

open

enum

If set, the user will be prompted to type the requiredInputText into an input field

requiredInputText

If `true`, the primary action button will be disabled

submitDisabled

title

Variant of the modal that represents the type of action handled by the modal.

variant

Renders the component with dark mode styles.

darkMode

Content that will appear inside of the Modal component.

children

closeIconColor

className applied to overlay div.
Disclaimer: This prop may be deprecated in future versions of Modal

contentClassName

By default, when a focus trap is activated the first element in the focus trap's tab order will receive focus.
With this option you can specify a different element to receive that initial focus.
Selector string (which will be passed to document.querySelector() to find the DOM node)

initialFocus

Callback to change the open state of the Modal.

setOpen

(open: boolean) => void | Dispatch<SetStateAction<boolean>>

Callback to determine whether or not Modal should close when user tries to close it.