Function: ConfirmationDialog()

ConfirmationDialog(__namedParameters): any

Defined in: composites/ConfirmationDialog/ConfirmationDialog.tsx:260

A Dialog composite that demands confirmation before invoking a side effect.

Reads its consequence prop at runtime to select the confirm mechanism — this is what makes Consequence a behavior-driving FSL dimension and not decoration. For destructive, the confirm button emits data-arming="true" while awaiting the second click. (data-pending is reserved by React Aria for isPending, which also toggles aria-disabled — unsuitable here because the armed button must remain clickable for the second press.)

Parameters

Parameter	Type
__namedParameters	ConfirmationDialogProps

Returns

any

Examples

<ConfirmationDialog
  trigger={<Button>Publish</Button>}
  title="Publish post?"
  confirmLabel="Publish"
  cancelLabel="Cancel"
  consequence="committing"
  onConfirm={publish}
>
  Your post will become visible to everyone.
</ConfirmationDialog>

<ConfirmationDialog
  trigger={<Button evaluation="negative">Delete account</Button>}
  title="Delete account?"
  confirmLabel="Delete"
  armedLabel="Click again to confirm"
  cancelLabel="Cancel"
  consequence="destructive"
  evaluation="negative"
  onConfirm={deleteAccount}
>
  This action cannot be undone.
</ConfirmationDialog>

Use consequence="committing" with evaluation="negative" when the action is irreversible-looking but does not warrant two-click arming (e.g. "Remove from list", "Unsubscribe"). The confirm button renders in the negative color without engaging the arming protocol.

<ConfirmationDialog
  trigger={<Button evaluation="negative">Unsubscribe</Button>}
  title="Unsubscribe?"
  confirmLabel="Unsubscribe"
  cancelLabel="Cancel"
  consequence="committing"
  evaluation="negative"
  onConfirm={unsubscribe}
/>