Skip to content

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

Free

Destructive with Custom Styled Buttons Alert Dialog for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not remove the member.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Alert Dialog anatomy: content, title, description, cancel, action

Usage

<AlertDialog>
  <AlertDialogTrigger :asChild="true">
    <Button variant="destructive">Remove Member</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <div class="flex items-center gap-2">
        <XIcon aria-hidden="true" class="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="true">
        <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