ConfirmationDialog

Component | Source Code

extends Omit<StructuredDialogProps, “buttons”>

Props Inheritance Hierarchy: Omit<StructuredDialogProps, “buttons”>

A special StructuredDialog that provides the user with a button to accept or reject a confirmation of something. This is suitable when you’d like the user to verify they want to perform the action that triggered the dialog. Usually, it’s because the action has consequences that are difficult or impossible to reverse, or it’s a significant operation.

The dialog will automatically close if the handler for the action (onAccept/onReject) evaluates to true.

Properties

show: boolean

Whether the dialog should be showing. You should be using this to control when the dialog is visible, as opposed to conditionally rendering.

Example

// DO:
<Dialog show={someShowState} onClose={() => setSomeShowState(false)} />

// DON'T:
{someShowState && (<Dialog />)}

acceptButton?: ConfirmationDialogButton

The data for the button that represents accepting the confirmation. Defaults to a button with text Okay that closes the dialog when clicked. Use onAccept to control what to do when this button is clicked and control whether the dialog should close when the button is clicked.

Prefer using onAccept rather than setting acceptButton.buttonProps.onClick, since that gives you more control over the autoclose operation.

hideBehaviour?: HideBehaviour

(Optional, defaults to HideBehaviour.Remove) How the dialog handles its children when it’s not shown. If HideBehaviour.Hide, the children of the dialog remain mounted when the dialog is hidden. If HideBehaviour.Remove, the children of the dialog will be unmounted when the dialog is hidden.

Consider setting this to HideBehaviour.Hide if the children of the dialog need to maintain some kind of
state in between separate showings of the dialog.

isModal?: boolean

Whether the dialog is a modal. A modal is a dialog that goes on top of the rest of the page in the center of the screen regardless of where it exists in the DOM. Visually, everything behind the modal is darkened. Elements behind the modal cannot be interacted with until the modal is closed.

onAccept?: Function

What to do when the confirmation prompt is accepted.

onReject?: Function

What to do when the confirmation prompt is rejected.

rejectButton?: ConfirmationDialogButton

The data for the button that represents rejecting the confirmation. Defaults to a button with text Cancel that closes the dialog when clicked. Use onReject to control what to do when this button is clicked and control whether the dialog should close when the button is clicked.

Prefer using onReject rather than setting rejectButton.buttonProps.onClick, since that gives you more control over the autoclose operation.