React Alert Dialog - Split Actions Layout
An alert dialog with split button layout separating a tertiary action on the left from primary confirmation actions on the right
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Three actions walk into a dialog—how do you lay them out without confusion? This React alert dialog uses justify-between to split Save as Draft on the left from Cancel and Publish on the right. Built with shadcn/ui and Radix UI, the spatial separation groups related choices while offering an alternative path. Perfect for publish workflows, form submissions, or any flow where users need a middle-ground option between proceed and abandon.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-custom-actions-5.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-custom-actions-5.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-custom-actions-5.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-custom-actions-5.jsonRelated patterns you will also like
Vertical Button Stack
Vertically stacked multiple actions
Mixed Button Styles
Multiple actions with variant styling
Custom Button Labels
Contextual action button labels
Form Dialog
Dialog with form inputs and submission
Standard Dialog
General purpose dialog pattern
Simple Confirmation
Two-button horizontal layout