Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Destructive

Destructive with Warning Badge Alert Dialog for React

A destructive dialog with a Permanent Action badge under the title.

Framework
UI library

Sometimes a red button isn't enough of a speed bump. This React alert dialog puts a Permanent Action badge between the title and the description of a Clear All Data warning. It's shadcn.io's Alert Dialog on Base UI with a destructive Badge and a database icon in the title.

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

Why put the badge between the title and the description?

The title says what, the badge says how serious, and the description explains. Placed there, it's read before the details and in that order by screen readers.

What should the badge say?

Two or three direct words: Permanent Action, Cannot Be Undone. Generic words like Caution don't say what's special about the action.

How is the badge styled?

It's a Badge with variant="destructive" and pill, so it follows the theme's destructive color with no extra classes.

When does a badge add something a red button doesn't?

When the action is more than destructive: permanent, immediate, or affecting a lot of data. A routine file deletion doesn't need one.

Can I add several badges?

Keep it to one. Several badges compete with each other; put further warnings in the description.

Does Clear All Data close the dialog?

Yes; clear the data 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