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

#Neutral

The neutral variant renders no header icon or status tinting.

#Width

Use width to adjust the size of the dialog.

#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	—	booleanDetermines whether dialog is open.
isConfirmButtonDisabled	—	booleanDetermines 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	—	stringDialog title.
children	—	ReactNodeDialog content. Use it to warn user about the consequences of the action they're about to perform.
cancelButtonText	"Cancel"	stringText of a button that cancels the action.
confirmButtonText	—	stringText of a button that confirms the action.
variant	—	"danger" | "warning" | "neutral"Dialog variant.
width	"sm"	DialogProps["width"]Dialog width.
onClose	—	() => voidCallback for when dialog is closed.
onCancel	—	() => voidOptional callback for when user canceled the action.
onConfirm	—	() => Promise<void> | voidCallback for when user has confirmed the action.