Confirmation Dialog

Confirmation dialogs are used to confirm a dangerous or destructive action that's about to be performed by the user.

#Usage

#Danger

#Warning

#Inside of a drawer inside of a menu

#Guidelines

#When to use

• When there's a dangerous or destructive action to perform on behalf of the user.

#When not to use

• When there's neutral or non-dangerous information or actions to perform on behalf of the user, use a generic dialog instead.

#Usage

• Confirmation dialog must never appear on its own without user's interaction (like clicking a button).

#Content

• Warn user about the consequences of the action they're about to perform.
• Use sentence case everywhere.
• Don't punctuate the end of the title.
• Always end a sentence with a period in description.
• Don't ask "Are you sure?". Instead, explain the consequences of this action.
• Confirm button text must be explicit and avoid generic words like "Confirm", "Submit", "Yes", "Delete". For example, a good button text would be "Delete source".

#Props

#ConfirmationDialog

Name	Default	Description
isOpen	—	boolean Determines whether dialog is open.
isConfirmButtonDisabled	—	boolean Determines whether confirm button is disabled. It's useful when there's additional layer of confirmation inside an alert dialog. For example, there could be a password input for especially dangerous actions or a text input to confirm the name of a resource that gets deleted.
title	—	string Dialog title.
children	—	ReactNode Dialog content. Use it to warn user about the consequences of the action they're about to perform.
cancelButtonText	"Cancel"	string Text of a button that cancels the action.
confirmButtonText	—	string Text of a button that confirms the action.
variant	—	"danger" | "warning" Dialog variant.
onClose	—	() => void Callback for when dialog is closed.
onCancel	—	() => void Optional callback for when user canceled the action.
onConfirm	—	() => Promise<void> | void Callback for when user has confirmed the action.