Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Custom Actions

Vertical Button Stack Alert Dialog for React

An alert dialog with its actions stacked vertically at full width.

Framework
UI library

More than two actions get cramped side by side. This React alert dialog stacks Edit, Duplicate, Share and Cancel vertically, each at full width, like an action sheet. It's shadcn.io's Alert Dialog on Base UI with the footer set to a column at every size.

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 stack buttons vertically?

With three or more actions, or labels too long to sit side by side. Two short buttons like Cancel and Confirm fit fine in a row.

How is the stack made?

AlertDialogFooter takes flex-col sm:flex-col, which overrides its row layout on wide screens. The buttons stretch to full width, with the footer's own gap between them.

What order should stacked buttons follow?

The main action on top, other actions below, and Cancel last, so the safe way out is always in the same place.

Should all the buttons look the same?

No. The main action keeps the solid style and the others use variant="outline", so the recommended choice is easy to spot.

Is a vertical stack better on mobile?

Yes. Buttons keep their full width and labels never wrap, which also makes for large touch targets. The footer already stacks on mobile; this layout keeps that on desktop too.

Does every button 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