Alert Dialog
A modal that interrupts to confirm something consequential. One published component, eight variants across three axes, and no way past it without answering.
Size=default · Destructive=No · Media=Yes · one of eight variants
Size and Media
Media is the mark above the title. It is a real axis rather than a hidden layer, because removing it closes the gap above the heading and moves everything below it.
One component, eight variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Alert 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 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.
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.
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.