Bain Logo

Confirm Dialog Trigger

Jump to Props

Trigger an action to display a confirmation dialog.

Confirmation dialogs help to double-check with the user before they perform an action that will be destructive, final or result in something important happening. For example – notifying another use of something or sending a report.

Generally the confirmation message should be easy to understand and the choice to confirm or not confirm should also be clear.

Import

Default

Provide an element as a child element to trigger the confirmation dialog. In most cases you should use a Button element.

Custom Content

You can pass custom title, body and button labels for the dialog's content.

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
childrenReactNode

Element(s) to be displayed and will trigger the confirm dialog when clicked.

confirmActionTypeprimary | destructiveprimary

Decides what type of button to show for user to confirm.

confirmButtonLabelstringConfirm

Text to display in the confirm action button.

cancelButtonLabelstringCancel

Text to display in the cancel action button.

dialogTitlestringPlease Confirm

Text to display in the dialog's title.

dialogBodystringPlease take a moment to confirm you wish to perform this action.

Text to display in the dialog's body.

onConfirmfunction

The function to call when the user clicks the confirm button.

onCancelfunction

The function to call when the user clicks the cancel button.

onClosefunction

The function to call after the dialog closes.

isOpenboolean

Flag to state whether or not the dialog is visible.

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy