Skip to content

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

Free

Destructive with Custom Styled Buttons Alert Dialog for Ark UI

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, Ark 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 asChild>
    <Button variant="destructive">Remove Member</Button>
  </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>
      <AlertDialogClose asChild>
        <AlertDialogAction variant="destructive">
          <XIcon aria-hidden="true" data-icon="inline-start" />
          Remove Member
        </AlertDialogAction>
      </AlertDialogClose>
    </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.

API Reference

Alert Dialog

Sets asChild and 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