Confirm

When to Use

• Before a destructive or irreversible action (delete, cancel, void, archive)
• Before bulk actions that affect many records
• When the action's consequence isn't obvious from the trigger

Page Implementation

function InteractionConfirm() {
  return (
    <Dialog.Root>
      <Dialog.Trigger render={<Button variant="destructive" />}>Delete</Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Header>
          <Dialog.Title>Delete order ORD-1024?</Dialog.Title>
          <Dialog.Description>
            This will remove the order and all its line items. This action cannot be undone.
          </Dialog.Description>
        </Dialog.Header>
        <Dialog.Footer>
          <Dialog.Close render={<Button variant="outline" />}>Cancel</Dialog.Close>
          <Dialog.Close render={<Button variant="destructive" />}>Delete</Dialog.Close>
        </Dialog.Footer>
      </Dialog.Content>
    </Dialog.Root>
  );
}

Copy Rules

• Title is a question, names the object: "Delete order ORD-1234?", "Cancel invoice INV-001?"
• Body names the object and the consequence: what will change, what will be lost, whether it's reversible
• Confirm button verb matches the title: "Delete", "Cancel invoice" — never "OK" or "Yes"

Constraints

• Dialog renders as bottom sheet below 1024px; centered max-w-sm at 1024+
• Confirm button must use variant="destructive" for destructive actions

Anti-patterns

• Vague titles like "Are you sure?" — gives users nothing to evaluate
• Cancel rendered as the primary visual treatment — promotes the wrong default
• Confirm button without variant="destructive" for destructive actions — no visual signal