Alert Dialog

Alert Dialog comes right before an action that is hard to undo, such as deleting a project or discarding unsaved changes. It interrupts on purpose and offers Confirm and Cancel. Your code runs the action.

Install

bashnpx shadcn@4.18.0 add @siteplane/alert-dialog

Import it from @/siteplane/components/alert-dialog. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Dialog: Pick Dialog instead when the overlay holds fields or several steps.
• vs Toast: Pick Toast with an undo action instead when the action is reversible and does not justify an interruption.
• vs Alert: Pick Alert instead when the message needs no response from the user.

Rules

• Write a title that names the action and a description that states the consequence.
• Control the root with open and onOpenChange when confirming runs a request, and close it only after the request succeeds.
• Show loading on the confirm button while the request runs and ignore dismissal until it settles.
• AlertDialogPopup includes the backdrop and viewport; don't wrap it in another portal.
• Below 640 px the popup becomes a full-width bottom sheet.

Reference

• Alert Dialog docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Overlays & disclosure. Read the installed source under src/siteplane before relying on an API.