Demands acknowledgement before continuing (WAI-APG alertdialog). modal-ui composed with destructive-confirm semantics: clear consequence prose, danger-colored primary action, Cancel as the safe default. Distinct from <modal-ui> bare (informational / form modal — role=dialog) and from toast-ui with action (which is non-blocking).
Action is irreversible, affects others (workspace-wide delete, billing change), or violates a strong invariant (data loss). The interruption is the point — modal blocks the page; the user must explicitly confirm or cancel. Distinct from inline-dialog (reversible micro-decisions) and from confirm-toast (reversible with timed undo).
For ordinary destructive actions where the consequence is bounded (delete a single item). Title carries the question; body carries the consequence; Cancel + Delete actions. modal-ui's [text] attribute is the title — don't author a separate <header>.
This action cannot be undone. The item will be permanently removed from your workspace.
For workspace-wide / billing / account-level destructives. User must type the resource name (or a fixed string like "DELETE") into the input — the danger button stays disabled until the typed string matches verbatim. Friction is the point: prevents muscle-memory mistakes.
This will permanently delete the workspace, all members, all data, and all integrations. This cannot be undone.
Non-destructive but interrupts to surface a consequence ("leaving this page will lose your edits"). Same alertdialog role; primary action is the SAFE path (Save & close) with the risky path (Discard) as an outline button.
You have unsaved changes to this document. Leaving will lose them.
[text] attribute for the title — NOT a child <header>. modal-ui auto-stamps the title bar from the attr; authoring your own header collides with the default slot (and the title ends up rendered as body content). See the modal-ui docs for its canonical slot vocabulary.sm "to look tighter". md gives the action buttons proper breathing room. Use lg only when the body has a multi-section form.variant="ghost" on the left; render the destructive action as color="danger" on the right. Pressing Enter on whatever has focus is the muscle-memory danger — keep Cancel-shaped affordances obvious.oninput handler toggles [disabled]. Friction is the feature.role="alertdialog").