Unsaved Changes Dialog

About this block

Unsaved Changes Dialog is the navigation guard shown when a user tries to leave a settings page with pending edits. The headline You have unsaved changes pairs with the instruction: leaving now will lose the edits below, you can save them first or discard and continue. Three bullets name the exact changes: webhook URL changed from api.old-vendor.com to api.new-vendor.com, retry policy set to 5 attempts was 3, and secret header added with the key set but the value not yet saved.

The unsavedItems array is what turns this from a generic warning into a useful one. A footer note explains that saving navigates to the destination after the config is written and fires a test ping. Three buttons cover all exit paths: Discard changes, Keep editing, and Save and leave as primary.

When to use

Reach for this block as the route-change guard on any settings or form page where edits can be partially complete. Wire it to your router beforeunload or navigation interception, and populate unsavedItems from your form dirty state.

A natural flow around it on an Application Pro page:

Before

• Settings pages
• Forms

After

• Settings pages
• Notifications

What you can display

One strong use is the webhook settings guard with specific field changes listed. Other leave-confirm dialogs this shape fits:

• Profile form. Display name, avatar, and timezone changed but not submitted.
• Billing plan. Seat count and billing cycle changed before confirming the new invoice.
• Integration config. Scopes and redirect URL edited mid-flow before saving the OAuth app.

Tip: list the actual changed values not just the field names; api.new-vendor.com is harder to discard by accident than Webhook URL.