Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Destructive

Destructive with Custom Styled Buttons Alert Dialog for React

A destructive dialog with labels that name each outcome and an icon on the destructive action.

Framework
UI library

Removing a person deserves more signals than a generic Remove. This React alert dialog repeats an X icon in the title and on Remove Member, and labels the safe choice Keep Member. It's shadcn.io's Alert Dialog on Base UI, styled entirely with the action's destructive variant rather than custom colors.

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 an X icon instead of a trash can?

X means remove or exclude, which fits people and access. A trash can means destroying data. A user-minus icon works for members too.

Is an icon in both the title and the button too much?

For removing people, the repetition is a safeguard: removing the wrong person is costly. For routine deletions one icon is enough.

Why Keep Member instead of Cancel?

It states the safe outcome: the member stays. Cancel only says the dialog closes.

How is the destructive button styled?

With variant="destructive" on AlertDialogAction and the icon marked data-icon="inline-start". The variant follows the theme, so there's no need for raw color classes.

Should the dialog offer an undo?

No, the dialog is for stopping the action. After the removal succeeds, show a toast with an undo or re-invite link.

Does Remove Member close the dialog?

Yes; run the removal 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