Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Confirmation

Confirmation with Short Content Alert Dialog for React

A minimal confirmation dialog with a short question and a one-sentence description.

Framework
UI library

Not every confirmation needs a paragraph. This React alert dialog asks Mark as Complete? with a single sentence of description, which suits low-stakes, reversible actions. It's shadcn.io's Alert Dialog on Base UI with nothing beyond the header and footer.

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

FAQ

When is a short confirmation enough?

For reversible, low-impact actions like completing a task or changing a preference. Use a detailed confirmation when the action can't be undone and people need context to decide.

Do I still need a description?

Yes. AlertDialogDescription is announced with the title, so even one sentence confirms to screen reader users what they're about to do.

Should I use a toast instead?

Not for confirming. A dialog asks before the action happens; a toast tells people after it did. Many apps do both: confirm first, then a toast that it worked.

Does a short confirmation still need two buttons?

Yes. Someone may have opened it by accident, so keep AlertDialogCancel as an easy way out. Only purely informational alerts get a single button.

How should I write the title?

Two to five words phrased as a question, like Mark as Complete? A question frames the yes or no the buttons answer.

Can people close it without choosing?

Escape closes it and returns focus to the trigger. A click outside does not, so the choice stays explicit.

All 39 alert dialog examples