Confirm provides a helpful composition of dialog components to drive the most common use case: driving user action to confirm or cancel a specific outcome.
Confirm makes use of the render prop pattern to provide
close functions to be called when needed.
Updating color and text of the button
If you want more control over markup and state, we provide a custom hook that returns the opener function and rendered confirmation dialog. The following example illustrates how the opener can be called outside the Confirm component.
We've found that most Dialogs involve the same common elements: Title, Message, a primary action (usually "Confirm"), and a secondary action (usually "Cancel").
To help standardize that layout, we created the
ConfirmLayout component for composing the relevant pieces. This is handy if you need something like Confirm in a separate context (e.g. when you need to lay out surface content for use in
Are you sure you want to close the dialog? Unsaved changes will be lost.