cancelLabel | LocalizedMessage | — | Label of the cancel Button. |
confirmLabel | LocalizedMessage | — | Label of the confirm Button. |
description | LocalizedMessage | — | What the action does and what it costs. Describes the dialog. Name the affected entity here. |
onConfirm | () => void | PromiseLike<void> | — | The caller's action, run when the confirm Button is pressed. Return nothing and the dialog closes at once. Return
a promise and the confirm Button shows its loading state, the cancel Button is unavailable, and Escape does not
close the dialog until the promise settles; a fulfilled promise then closes it. A rejected promise keeps it open
and is not rethrown: report the failure from the handler and pass error. |
title | LocalizedMessage | — | Heading that names the dialog. Always visible. |
children | ReactNode | — | Extra content between the description and the actions, such as the records an action affects. A typed
confirmation field sits below it. |
className | string | — | Classes appended to the dialog surface. Put overrides in @layer chroma.overrides. |
confirmation | ConfirmDialogConfirmation | ConfirmDialogConfirmation.None | Turns the type-to-confirm field on.
What the person does before the confirm action is available. |
confirmDisabled | boolean | false | Makes the confirm Button inert until the caller allows it, such as an acknowledgement the caller tracks itself. It
combines with {@link ConfirmDialogTypedProps}: a typed confirmation stays inert until the text matches and this is
false. A pending confirm is shown as loading, not disabled. |
defaultOpen | boolean | false | Initial open state when uncontrolled. |
error | LocalizedMessage | — | A failure to show above the actions, such as why the last confirm did not complete. It is announced when it
appears. Clear it by passing undefined. |
instruction | LocalizedMessage | — | The words before the phrase in the field's label and instruction, such as "To continue, type". The label reads
instruction, then the phrase, then instructionEnd. Do not repeat the phrase here.
Only a typed confirmation takes instruction copy. |
instructionEnd | LocalizedMessage | — | The words after the phrase, such as "in the field below." Omit it when the sentence ends with the phrase.
Only a typed confirmation takes instruction copy. |
matchedLabel | LocalizedMessage | — | Announced politely when the typed text first matches, such as "Confirmation text matches. Delete is available."
Omit it to announce nothing.
Only a typed confirmation announces a match. |
onOpenChange | ((open: boolean, details: DialogOpenChangeDetails) => void) | — | Called once per open or close request: trigger press, cancel press (close-press), a settled confirm
(close-press), and Escape (close-request). A backdrop press never closes the dialog. A cancelable request is
vetoed with details.cancel(). While a confirm is pending, close requests are vetoed before this is called.
@param open - The requested open state
@param details - Change metadata |
open | boolean | — | Controlled open state. Pair with {@link ConfirmDialogProps.onOpenChange}. |
pendingLabel | LocalizedMessage | — | Announced politely and used as the confirm Button's name while a confirm is pending, such as "Deleting incident".
Omit it to keep confirmLabel as the name and announce nothing. |
phrase | string | — | The text the person must type: the name of the record being deleted, or a fixed word for a bulk action. This is
data, not copy; the block shows it in a left-to-right run and compares what is typed with it after trimming
surrounding whitespace and normalizing to Unicode NFC. The comparison is case-sensitive. An empty phrase never
matches, so the confirm Button stays inert.
Only a typed confirmation takes a phrase. |
ref | Ref<HTMLDialogElement> | — | Ref to the rendered dialog element. |
trigger | DialogControlElement | — | One Button or Link that opens the dialog. Omit it when the caller controls open. |
variant | ConfirmDialogVariant | ConfirmDialogVariant.Default | How the confirm action reads. |