React Alert Dialog - Vertical Button Stack
An alert dialog with vertically stacked action buttons for multiple choices displayed in a full-width layout
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
When you have more than two actions, horizontal layouts get cramped fast. This React alert dialog stacks buttons vertically with flex-col for multiple options like Edit, Duplicate, and Share. Built with shadcn/ui and Radix UI, each button gets full width and clear visual separation. Perfect for context menus, action sheets, or any dialog where users choose from 3+ actions without cramming buttons side-by-side.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-custom-actions-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-custom-actions-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-custom-actions-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-custom-actions-2.jsonRelated patterns you will also like
Mixed Button Styles
Multiple actions with different button variants
Split Actions Layout
Grouped actions with visual separation
Dropdown Menu
Menu alternative for multiple actions
Simple Confirmation
Two-button horizontal layout
Action Sheet
Mobile-style action sheet pattern
Popover Menu
Lightweight menu for multiple options