Components

Alert Dialog

A focused decision point for actions that are destructive, irreversible, or expensive to undo.

Confirmation

Name the exact action in the title and destructive button. Keep the description factual, and make cancellation the quiet default path.

tsx

<AlertDialog.Root>
  <AlertDialog.Trigger render={<Button variant="danger">Delete repository</Button>} />
  <AlertDialog.Portal>
    <AlertDialog.Backdrop />
    <AlertDialog.Popup>
      <AlertDialog.Header>
        <AlertDialog.Title>Delete repository?</AlertDialog.Title>
        <AlertDialog.Description>
          This permanently removes the repository and its settings.
        </AlertDialog.Description>
      </AlertDialog.Header>
      <AlertDialog.Footer>
        <AlertDialog.Close render={<Button>Cancel</Button>} />
        <AlertDialog.Close render={<Button variant="danger">Delete repository</Button>} />
      </AlertDialog.Footer>
    </AlertDialog.Popup>
  </AlertDialog.Portal>
</AlertDialog.Root>

Opening traps focus and announces both title and description. Closing with Escape, the backdrop, or either action returns focus to the trigger. Use Dialog for ordinary tasks and forms; reserve Alert Dialog for a decision that requires explicit attention.