shadcn.io is an independent project built on shadcn/ui
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 Vue, Ark UI does not run those actions.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger :asChild="true">
<Button variant="outline">Choose Action</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Select an Option</AlertDialogTitle>
<AlertDialogDescription>
Choose how you want to proceed with this item.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter class="flex-col sm:flex-col">
<AlertDialogClose :asChild="true">
<AlertDialogAction>Edit Item</AlertDialogAction>
</AlertDialogClose>
<AlertDialogClose :asChild="true">
<Button variant="outline">Duplicate Item</Button>
</AlertDialogClose>
<AlertDialogClose :asChild="true">
<Button variant="outline">Share Item</Button>
</AlertDialogClose>
<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.
API Reference
Alert Dialog
Sets asChild. The rest is on the Alert Dialog page.
Button
Sets variant="outline". The rest is on the Button page.
