🗨️ Modals & Confirmations

This page contains samples for various modals that users come across.

Goal: Make the action obvious and time-specific.

Before

New Event

After

Schedule a Meeting

Goal: Reduce anxiety and clarify permanence.

Before

Delete item?

After

Are you sure you want to delete this item? This action can’t be undone.

Goal: Ensure clarity before taking irreversible actions.

Before

Are you sure you want to delete?

After

Delete this file?  
This action can’t be undone.  
[Cancel] [Delete File]

Goal: Let users confirm an action and reassure them it's safe.

Before

Do you want to sign out?

After

Ready to sign out?  
You’ll need to log in again to continue using your account.  
[Stay Logged In] [Sign Out]

Goal: Confirm an action while reminding of impact.

Before

Submit this form?

After

Submit your feedback now?  
You won’t be able to edit it after submission.  
[Go Back] [Submit]

Goal: Warn users before they lose unsaved progress.

Before

Discard changes?

After

Unsaved changes will be lost.  
Do you want to leave without saving?  
[Cancel] [Discard Changes]

Goal: Reduce churn and clarify the impact of cancellation.

Before

Cancel subscription?

After

Are you sure you want to cancel your subscription?  
You’ll lose access to premium features on April 30.  
[Keep Subscription] [Cancel Anyway]

Goal: Help users double-check important inputs before continuing.

Before

Is this your address?

After

Confirm your delivery address:  
123 Main St, Apt 4B, Springfield  
[Edit Address] [Confirm]

Goal: Make destructive actions very explicit.

Before

Clear data?

After

This will permanently remove all stored data.  
Are you sure you want to continue?  
[Cancel] [Clear All Data]

Goal: Clearly state the consequence of removing someone.

Before

Remove this user?

After

Remove John Smith from the team?  
They’ll lose access to all shared projects.  
[Cancel] [Remove Member]

Last updated 2 months ago