A modal that interrupts to confirm something consequential. One published component, eight variants across three axes, and no way past it without answering.
One component, eight variants
Alert Dialog - Size × Destructive × Media: default · sm × No · Yes × Yes · No
Using the Alert Dialog
Alert Dialog or Dialog?
Alert Dialog is for a decision that cannot be shrugged off - deleting, cancelling, discarding. It takes focus and expects an answer. Dialog is for everything else: a form, a picker, a detail view the reader can simply close.
When do I turn Destructive on?
When the confirming action removes something or cannot be undone. It only recolours the confirm button, so the dialog still reads calmly and the weight sits on the one control that carries the consequence.
Why is Media an axis instead of a hidden layer?
Because removing it changes the layout. A part that moves everything beside it becomes a real property; a part that does not can stay a hidden layer. The mark sits above the title, so taking it away closes that gap.
Should cancel be on the left?
It is on the left here, next to a filled confirm on the right, matching shadcn/ui. The important part is staying consistent across your product - a dialog that swaps the order is how people delete things by accident.