Shadcn.io is not affiliated with official shadcn/ui
Split Actions Layout
An alert dialog with split button layout separating a tertiary action on the left from primary confirmation actions on the right
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.
Split Actions Layout preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.