Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Destructive

Destructive with Item Count Alert Dialog for React

A destructive dialog that names how many items will be deleted, in the title and on the action.

Framework
UI library

Deleting one item feels different from deleting 24. This React alert dialog repeats the count in the title, the description and the Delete 24 Items action, and adds a warning panel about references. It's shadcn.io's Alert Dialog on Base UI.

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 should the count appear?

Everywhere people look before confirming: the title, the description and the action label. The repetition is the safeguard against deleting more than intended.

How do I handle one item?

Pluralize from the count: Delete 1 Item?, not Delete 1 Items?. The demo's 24 is static text; build the strings from your selection.

When should a bulk delete need more confirmation?

As the count grows, so should the friction: add a checkbox or type-to-confirm for large deletions, as in Destructive with Checkbox Confirmation.

How is the warning panel styled?

A rounded-md border panel with border-destructive/20 bg-destructive/5, and the word Warning in text-destructive. Use it for knock-on effects people may not expect, like references from other resources.

What if the selection changes while the dialog is open?

Read the count when the dialog opens and disable the action if it drops to zero, so the number shown is always the number deleted.

Does the action close the dialog?

Yes; run the deletion in its click handler. On Base UI, AlertDialogAction is a plain button that leaves the dialog open: control open and set it to false in the action's handler.

All 39 alert dialog examples