shadcn.io is an independent project built on shadcn/ui
Draft stands alone. Cancel and Publish Now sit together. None of the three buttons saves or publishes.
Split the footer when one path is optional and the other two are the decision. Long labels can stack. A Button row on the page can make the same split. In Svelte, Ark UI does not publish the changes.
Installation
Anatomy
Usage
<AlertDialog><AlertDialogTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Confirm Action</Button>{/snippet}</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Review Changes</AlertDialogTitle><AlertDialogDescription>Please review your changes before publishing. You can save as draft or publish immediately.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter class="sm:justify-between"><AlertDialogClose>{#snippet asChild(props)}<Button {...props()} variant="outline">Save as Draft</Button>{/snippet}</AlertDialogClose><div class="flex flex-col-reverse gap-2 sm:flex-row"><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogClose>{#snippet asChild(props)}<AlertDialogAction {...props()}>Publish Now</AlertDialogAction>{/snippet}</AlertDialogClose></div></AlertDialogFooter></AlertDialogContent></AlertDialog>FAQ
How do I decide which buttons go together?
Cancel and Publish Now are the final decision, stop or go, so they share a group. Save as Draft neither publishes nor cancels; it's an alternative, so it stands apart.
What order should the buttons follow?
The alternative first, then Cancel, then the primary action last. That puts the commit where people expect it and keeps it away from where they click by habit.
How is the footer split?
AlertDialogFooter takes sm:justify-between, with Save as Draft on its own and the other two in a flex gap-2 group. Below sm everything stacks full width.
Can I add more secondary actions on the left?
Avoid it. One alternative is clear; several create a decision of their own. Put extra options in a menu, or reconsider whether they belong in the dialog.
API Reference
Alert Dialog
Sets props. The rest is on the Alert Dialog page.
Button
Sets props and variant="outline". The rest is on the Button page.
