Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Custom Actions

Split Actions Layout Alert Dialog for React

An alert dialog with a secondary action on one side and Cancel and the main action on the other.

Framework
UI library

Three choices need a layout that shows how they relate. This React alert dialog puts Save as Draft on its own on one side and Cancel and Publish Now together on the other, so the alternative path is clearly separate from the final decision. It's shadcn.io's Alert Dialog on Base UI with a split footer.

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

How do I decide which buttons go together?

Cancel and Publish Now are the final decision, stop or go, so they share a group. Save as Draft neither publishes nor cancels; it's an alternative, so it stands apart.

What order should the buttons follow?

The alternative first, then Cancel, then the primary action last. That puts the commit where people expect it and keeps it away from where they click by habit.

How is the footer split?

AlertDialogFooter takes sm:justify-between, with Save as Draft on its own and the other two in a flex gap-2 group. Below sm everything stacks full width.

Can I add more secondary actions on the left?

Avoid it. One alternative is clear; several create a decision of their own. Put extra options in a menu, or reconsider whether they belong in the dialog.

In what order do keyboard users reach the buttons?

In DOM order: Save as Draft, Cancel, Publish Now. The visual order matches, so tabbing never jumps around.

Do all the buttons close the dialog?

Yes; run each action's work 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