Skip to content

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

Free

Destructive with Custom Styled Buttons Alert Dialog for React

A remove-member dialog whose buttons say Keep Member and Remove Member, with an X icon on the destructive action.

An X icon sits beside the title and again before Remove Member. Keep Member is the cancel label. The description says the person would lose project access. Nobody is removed.

Name both outcomes when Cancel is vague. Put the icon on the destructive action only. A plain delete can be a destructive Button without a custom cancel. In React, Base UI does not remove the member.

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" />}>
    Remove Member
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <div className="flex items-center gap-2">
        <XIcon aria-hidden="true" className="size-5 text-destructive" />
        <AlertDialogTitle>Remove Team Member</AlertDialogTitle>
      </div>
      <AlertDialogDescription>
        Are you sure you want to remove this member from the team? They will
        lose access to all projects and data.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Keep Member</AlertDialogCancel>
      <AlertDialogAction variant="destructive">
        <XIcon aria-hidden="true" data-icon="inline-start" />
        Remove Member
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

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.

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