Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Destructive

Destructive with Consequence Details Alert Dialog for React

A destructive dialog that lists what revoking an API key breaks in a tinted panel.

Framework
UI library

Saying an action is permanent isn't enough; people need to see what breaks. This React alert dialog lists the consequences of revoking an API key in a destructive-tinted panel before the Revoke Access action. It's shadcn.io's Alert Dialog on Base UI with the panel as plain theme classes.

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 a tinted panel for the list?

bg-destructive/10 with text-destructive ties the list to the destructive action without the glare of a solid red block. The theme tokens keep it readable in light and dark mode.

How many consequences should I list?

Three to five, one per line, each a short phrase. More than that and people skim past the list.

In what order?

Most severe and immediate first, procedural notes like Cannot be reversed last. People read the top items most carefully.

How should I word them?

Directly and actively: Disable all API requests using this key, not Requests may be affected. Hedging undermines a warning.

Where do the items come from?

A static array at module scope, mapped to li elements. Replace it with the real effects of your action.

Does Revoke Access close the dialog?

Yes; revoke the key 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