Dialogs & sheets

Dialogs interrupt for a decision. Everything else belongs in the page.

Types

• Action dialog, requests a choice before proceeding (remove package, pick mirror). Contains a title, consequence statement, and 2–3 actions.
• Alert, reports a blocking problem. One acknowledging action.
• Form dialog, short input flows (rename, new profile). Fields + confirm.
• Sheet/side panel, non-modal detail beside content; used instead of dialogs when the user needs the underlying context visible.

Rules

• State the consequence before the action, concretely (“…and its 3 dependencies”, not “…and related components”).
• At most three actions; the confirming action carries the intent's styling (destructive stays destructive inside the dialog only).
• Cancel is always present in destructive and form dialogs.
• Esc cancels; Enter activates the default action (never a destructive one).
• Dialogs trap focus while open and return it to the trigger on close.

Interactive examples: Dialogs in the design system.