Skip to content

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

Free

Confirmation with Custom Button Labels Alert Dialog for Vue

A confirmation whose buttons say Stay in Workspace and Leave Workspace, instead of the generic Cancel and Continue.

UI library: Ark UI

The title is Leave Workspace. The description says a new invite is required to come back. The buttons name both outcomes. Leaving does not happen.

Name the outcome when Cancel could mean the wrong thing. If people may dismiss this without choosing, use a Dialog. In Vue, Ark UI does not remove anyone from the workspace.

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="outline">Open Dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Leave Workspace</AlertDialogTitle>
      <AlertDialogDescription>
        Are you sure you want to leave this workspace? You will need to be re-invited to access it again.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Stay in Workspace</AlertDialogCancel>
      <AlertDialogClose :asChild="true">
        <AlertDialogAction>Leave Workspace</AlertDialogAction>
      </AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

FAQ

When should I use custom labels instead of Continue and Cancel?

Whenever the action isn't obvious from the title alone. Leave Workspace, Delete Account and Cancel Subscription say what happens; keep Continue and Cancel for generic Are you sure? prompts.

How long can the labels be?

Two to four words, verb first: Leave Workspace, not Please remove me from this workspace. Long labels wrap on narrow screens, where the footer stacks the buttons.

Should the cancel button get a custom label too?

Yes. Stay in Workspace states the safe outcome, so someone who reaches for the first button still knows what it does. Both buttons describing outcomes is what makes this pattern work.

Where does the risky action go?

Last. AlertDialogFooter puts AlertDialogAction after AlertDialogCancel on wide screens and stacks it on top on mobile, the convention people expect for the primary choice.

Do descriptive labels help screen reader users?

Yes. Screen readers announce the button text, and Leave Workspace makes sense on its own, even for someone tabbing straight to the buttons without hearing the description.

Do both buttons close the dialog?

Stay in Workspace is AlertDialogCancel, which always closes. Leave Workspace closes it too, so put your leave logic in its click handler.

API Reference

Alert Dialog

Sets asChild. The rest is on the Alert Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

All 39 alert dialog examples