Gallery

Design a single dialog or prompt pattern for a focused task, not a catch-all modal. Pick one scenario and make the UI match it: confirm a destructive action, request a short piece of input, or present a blocking message with one next step.

Show the full interaction state: trigger, open dialog, and dismissal. Include the backdrop treatment, title, supporting copy, and the action row. If the dialog collects input, show the field label, placeholder, validation hint, and what happens after submit. If it is a confirmation, make the consequence explicit in the body copy.

Keep the layout compact and readable in both desktop and mobile widths. The primary action should be unmistakable, the secondary action should be quieter, and the dialog should not trap the user without a clear way out. If there is a destructive or irreversible action, surface that risk in the copy rather than hiding it in styling.