Modal

Design a modal for a single, specific task in an existing product flow. Pick a moment that needs interruption: confirming deletion, paying for an upgrade, changing a setting, or entering a short form. The modal should sit on top of the page, block the main flow, and make the next step obvious.

Show the trigger that opens it, the open state, and the dismissed state. The modal needs a clear title, concise body copy, one primary action, and one secondary way out. If the task is risky, make the label and hierarchy reflect that risk instead of hiding it behind generic copy.

Make dismissal work from the close button, the Escape key, and clicking the backdrop if that fits the task. Keep focus trapped inside while open, and return focus to the trigger when it closes. The background should read as inactive without losing context.

Design for the details that usually break modals: long text, short text, loading on submit, and error or validation feedback if the modal contains a form. The result should feel like part of the same interface, not a floating alert with no clear next step.

Surprise users with delightful details! For instance, a subtle animation when the modal appears or disappears can enhance the user experience and add a touch of sophistication to your design.