Ask, then commit.

Two ready-made dialog recipes that dim the room for one decision — a Confirm Dialog for an irreversible yes/no, and a Form Dialog for a short bit of structured input — each with a quiet dismiss and one primary action.

1Confirm Dialog

Cancel this appointment?

Maya Reyes' Signature Facial on Jun 24 at 10:00 will be released and the slot reopened. This can't be undone.

MR Maya ReyesJun 24 · 10:00 · Avery

Keep it Cancel appointment

ConfirmDialog wraps AlertDialog. variant="destructive" tints the AlertDialogAction rust; AlertDialogCancel stays neutral.

2Form Dialog

New booking

Add a client and a treatment to open a slot on the calendar.

Client* Devon Cho

Treatment* Hydrating Facial

Date & time* Jun 26 · 14:30

Note Optional — prep, allergies, requests… Visible to the assigned practitioner only.

Cancel Save booking

FormDialog wraps Dialog, with a <form> of Field → Label + Input. Footer is an outline Cancel and a submit Save (submitDisabled while saving).

Composes

Dialog AlertDialog Button Field Label Input Select

When to reach for it

Reach for ConfirmDialog for any irreversible yes/no — a cancellation, a release, a delete — where the user must read before they act. Reach for FormDialog when a short, self-contained set of fields needs to be captured without leaving the page.

Not for

Don't house multi-step flows or long scrolling forms in a dialog — a dialog is one decision. For anything longer, route to a full page or a Sheet.

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait