Skip to content

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

Free

Destructive with Item Count Alert Dialog for React

A destructive dialog that says 24 items in the title and on the button, plus a note that some items are referenced.

The title is Delete 24 Items, and the action repeats that count. The description says the delete would be permanent. A warning says some items may be referenced. The number is hard-coded. Nothing is deleted.

Show the real count before a bulk delete, and disable the trigger at zero. One item can use a shorter confirm. A Button can show the count before this opens. In React, Base UI does not count the selection.

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 render={<Button variant="destructive" />}>
    Delete Selected
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete 24 Items?</AlertDialogTitle>
      <AlertDialogDescription>
        You are about to permanently delete 24 selected items. This action
        cannot be undone and all associated data will be lost.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <div className="rounded-md border border-destructive/20 bg-destructive/5 p-3 text-sm">
      <span className="font-medium text-destructive">Warning:</span> Some of
      these items may be referenced by other resources.
    </div>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">
        Delete 24 Items
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

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.

API Reference

Alert Dialog

Sets variant="destructive". The rest is on the Alert Dialog page.

Button

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

All 39 alert dialog examples