Skip to content

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

Free

Vertical Button Stack Alert Dialog for React

An alert dialog that stacks Edit, Duplicate, Share, and Cancel as full-width actions, in that order.

Edit is the filled action. Duplicate and Share are outline. Cancel is last. The footer is a column at every size. None of the buttons edit, copy, or share.

Stack the actions when three or more labels would not fit in a row. Two choices should stay in a row. The same list is lighter as a Dropdown Menu. In React, Base UI does not run those actions.

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

Anatomy

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

Usage

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    Choose Action
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Select an Option</AlertDialogTitle>
      <AlertDialogDescription>
        Choose how you want to proceed with this item.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter className="flex-col sm:flex-col">
      <AlertDialogAction>Edit Item</AlertDialogAction>
      <AlertDialogAction variant="outline">Duplicate Item</AlertDialogAction>
      <AlertDialogAction variant="outline">Share Item</AlertDialogAction>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

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.

API Reference

Alert Dialog

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

Button

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

All 39 alert dialog examples