Clinia UI

Alert Dialog

A modal that interrupts the user to confirm a destructive or irreversible action.

shadcn docs →

When to use

  • Confirm an action that destroys data or can't be undone: delete a source, revoke an API key.
  • Stop the user before they leave and lose unsaved work.

When not to use

  • A task with fields: use Dialog.
  • A confirmation after the action is done: use Sonner.
  • A warning that doesn't need an answer now: use Alert.

Install

npx shadcn@latest add @clinia/alert-dialog

Anatomy

Delete Montreal clinic?

Its 1,204 records are removed. This can't be undone.

  1. 1Containerdata-slot="alert-dialog-content"bg-popover · rounded-lg · p-6
  2. 2Title, the questiondata-slot="alert-dialog-title"text-lg · font-medium
  3. 3Description, the consequencedata-slot="alert-dialog-description"text-sm · text-muted-foreground
  4. 4Canceldata-slot="alert-dialog-cancel"outline · first
  5. 5Actiondata-slot="alert-dialog-action"destructive · last

Clinia rules

  • The title asks the question and names the object: Delete Montreal clinic?
  • The description says what happens and whether it can be undone: Every source, index, and API key in it is removed. This can't be undone.
  • The action names the result (Delete workspace), never OK or Yes. Use variant="destructive" on it when the action destroys data.
  • Cancel comes first and uses outline. The action comes last. On small screens the buttons stack with the action on top.
  • size="sm" is for a one-line confirmation: the header centres and the two buttons share one row.
  • Opened without AlertDialogTrigger (controlled with open), focus has no trigger to return to. Pass finalFocus to AlertDialogContent with the element that should get it.

Do and don't

Delete Montreal clinic?

Do name the result on the action button.

Delete Montreal clinic?

Don't answer the question with OK, which says nothing about what happens.

States

default

Delete Montreal clinic?

Its 1,204 records are removed. This can't be undone.

size sm

Sign out of every device?

Toggle the site theme to review both themes.

Accessibility

Built in

  • Uses role="alertdialog" and does not close on an outside click, so the choice is always explicit. Use Dialog for anything that isn't a confirmation.
  • Focus moves into the dialog when it opens, stays inside, and returns to the trigger when it closes.
  • Escape closes it, the same as Cancel.

Your responsibility

  • Always render AlertDialogTitle and AlertDialogDescription. Screen readers read both when it opens, and the description carries the consequence.
  • Open it from a real button, so focus has somewhere to return.

How to test

  1. Open it with the keyboard: focus lands inside the dialog.
  2. Press Tab repeatedly: focus cycles between Cancel and the action and never reaches the page behind.
  3. Click the backdrop: nothing happens. Press Escape: it closes and focus returns to the trigger.
  4. With a screen reader, opening it announces an alert dialog, its title and its description.

API

AlertDialogContent

PropValuesDefaultDescription
size
defaultsm
default

sm for a one-line confirmation.

All other props come from Base UI Alert Dialog.

Related