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.



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
  • Styled Functions

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.


Text to display in the confirm action button.


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.


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


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


The function to call after the dialog closes.


Flag to state whether or not the dialog is visible.

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