Skip to content
Components

ModalWarning: Draft

A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed.

Modals interrupt the user’s flow, so get straight to the point.

Summarise the situation in the heading and keep descriptions concise — include only what users need to act now.

29653cae-7a66-80e6-8250-c846421a96da.png
29653cae-7a66-80e3-bcc5-da265e1c6dfd.png

Assume that users are competent adults. Use calm, factual language that focuses on the decision at hand.

Avoid warnings, emotional cues, or anything that could make users second-guess their decision.

Inspire confidence through clarity, not caution.

Where possible, make destructive actions reversible to avoid constantly asking “Are you sure…?” via modals.

29653cae-7a66-8034-8528-efdd9cb32951.png
29653cae-7a66-80a8-bcb5-e274e0e4ad1c.png

Modals disappear once dismissed. Avoid placing important details or instructions users may need later.

Never use pop-up modals purely for information — there are better ways to communicate without blocking the screen.

29653cae-7a66-8040-b0a1-cd0b3314dec2.png
29653cae-7a66-80cc-b64c-e545fc0788b2.png

Every modal should have a distinct primary action that aligns with user goals.

Avoid non-specific labels like Confirm and steer clear of double negatives in button groups (e.g. Cancel / Go Back).

Use clear action‑object phrasing such as Delete file or Discard changes so users know exactly what will happen.

29653cae-7a66-8090-924c-fa6390aeb20c.png
29653cae-7a66-80a4-9535-f547de29db7b.png
This page is a draft. Its content is likely to change.