Interface of Confirm
🏗 Coming Soon

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.

Standard Use

Confirm makes use of the render prop pattern to provide open and 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 DialogManager).

Discard Changes?

Are you sure you want to close the dialog? Unsaved changes will be lost.