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.

Get to the point

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.

Sign in to Xero

You’ll be taken to Xero to authorise the connection with Pleo.

Authorisation required

To successfully connect, you’ll need to authorise the connection in Xero. After connecting, return to Pleo to map your chart of accounts, import cost centres and review tracking categories.

Keep the tone neutral

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.

Discard unsaved changes?

You’ll lose any edits made since your last save.

Are you sure you want to exit without saving changes?

If you close this window now, all of the edits you’ve made — including notes and attachments — will be lost forever and cannot be recovered.

Don’t push critical information

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.

Session expired

You’ve been signed out for security reasons. Log in again to continue.

Session expired

You’ve been signed out for security reasons. Log in again to continue.
Warning:
Remember to use a strong password and activate 2-factor authentication for extra protection.

Facilitate decisions

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.

Delete trip?

All mileage claims related to this trip will be deleted.

Are you sure you want to cancel this trip?

Are you sure you want to cancel this trip? This will also cancel all related mileage claims.
Didn't find what you were looking for?
Edit this page
This page is a draft. Its content is likely to change.