Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Confirmation

Confirmation with Custom Button Labels Alert Dialog for React

A confirmation dialog whose buttons name what each choice does instead of Cancel and Continue.

Framework
UI library

Continue and Cancel make people stop and think about which one is safe. This React alert dialog labels both outcomes instead: Stay in Workspace and Leave Workspace. It's shadcn.io's Alert Dialog on Base UI, with AlertDialogCancel for the safe choice and AlertDialogAction for the one that acts.

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

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. 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