Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Confirmation

Confirmation with Detailed Description Alert Dialog for React

A confirmation dialog that lists every consequence of the action before the reader confirms.

Framework
UI library

Sometimes one warning sentence isn't enough and people need to see everything that will change. This React alert dialog follows its description with a bulleted list of what transferring a project's ownership does. It's shadcn.io's Alert Dialog on Base UI, with the list as a plain ul between the header and the 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

Where does the list go?

Right after AlertDialogHeader, as a ul with list-disc, ms-4 and text-muted-foreground. AlertDialogDescription holds the lead-in sentence, which keeps the description short when it's announced.

How many consequences should I list?

Three to five short items. Past that people skim, and the list stops doing its job. If there's more to say, link to documentation instead.

How should I phrase each item?

Start each with a verb in the same form: Remove your admin access, Grant full control, Update billing information. Parallel, short items are faster to scan than sentences.

How are the items rendered?

They're a static array at module scope, mapped to li elements keyed by their text. Replace it with the real consequences of your action, or build the list from props.

Does this fit on small screens?

Keep it to a few short items. The dialog is sized for the viewport, and a confirmation people have to scroll through is one they read less carefully.

Should each item get an icon?

Usually not. Bullets already separate the items, and icons on every line slow scanning. Save one icon for the title if the dialog needs emphasis.

All 39 alert dialog examples