Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Simple Confirmation Dialog Alert Dialog for Ark UI

A basic confirmation titled Are you sure, with Cancel and Continue, describing a permanent account deletion that does not run.

The title is Are you sure. The text says the account and its data would be permanently deleted. The buttons are Cancel and Continue. Continue does not delete the account.

Use this before a step that cannot be undone, and name what is lost. Make the first control a destructive Button too. In React, Ark UI does not delete the account.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Alert Dialog anatomy: content, title, description, cancel, action

Usage

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Open Dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your
        account and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogClose asChild>
        <AlertDialogAction>Continue</AlertDialogAction>
      </AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

FAQ

When should I use an Alert Dialog instead of a Dialog?

Use an Alert Dialog for a decision the reader must make, like confirming a deletion. Use a Dialog for forms and content people may close at any time.

Can people dismiss it with Escape or a click outside?

Escape closes it. A click outside doesn't, so the reader has to pick Cancel or Continue. Set closeOnInteractOutside to true if a click outside should close it.

What's the difference between the two buttons?

AlertDialogCancel is the safe choice, styled as an outline button, and always closes the dialog. AlertDialogAction is the primary button that runs the operation. Keep Cancel first and the action last.

How do I run an async operation on Continue?

Control the dialog's open state, give the action an isLoading state while the request runs, and close the dialog when it settles. Actions with Loading State shows the pattern.

Is it accessible?

Yes. The dialog has role="alertdialog", traps focus while open, is labelled by its title and description, and returns focus to the trigger when it closes.

Can the action use another button style?

Yes. AlertDialogAction takes the button variant: destructive for deletions, the default for normal confirmations.

API Reference

Alert Dialog

Sets asChild. The rest is on the Alert Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

All 39 alert dialog examples