Unsaved Changes Modal

• Compatibility
• Installation
• Usage
• Customization
  • Modal appearance
  • Translations
  • Views
  • Skipping the prompt for a link
• Testing
• Changelog
• Contributing
• Security
• Credits
• License

In the Filament panel, leaving a dirty form shows a Filament modal instead of the browser’s blocking confirmation dialog.

Reloading or closing the tab still uses the native browser prompt (which cannot be customized).

Works with Filament SPA (livewire:navigate) and normal full-page navigation (same-origin link clicks in the panel body). Uses the same dirty-state rules as Filament’s unsavedChangesAlerts(); this package only swaps the confirmation UI.

#Compatibility

Requires Filament 5.3.5+ due to a known XSS vulnerability (CVE-2026-33080) in earlier versions.

#Installation

composer require azgasim/filament-unsaved-changes-modal

#Usage

You need both unsavedChangesAlerts() and this plugin on the same panel.

use AzGasim\FilamentUnsavedChangesModal\FilamentUnsavedChangesModalPlugin;

return $panel
    // … your existing panel configuration …
    ->unsavedChangesAlerts()
    ->plugin(FilamentUnsavedChangesModalPlugin::make());

You can also register the plugin inside ->plugins([...]) with your other plugins.

#Customization

#Modal appearance

Defaults live on [FilamentUnsavedChangesModalPlugin](src/FilamentUnsavedChangesModalPlugin.php): DEFAULT_MODAL_WIDTH, DEFAULT_MODAL_ICON_COLOR, DEFAULT_STAY_BUTTON_COLOR, DEFAULT_LEAVE_BUTTON_COLOR, and an icon default of OutlinedExclamationTriangle when you do not call modalIcon().

FilamentUnsavedChangesModalPlugin::make()
    ->modalWidth('xl')
    ->modalIcon('OutlinedExclamationTriangle')
    ->modalIconColor('danger')
    ->stayButtonColor('gray')
    ->leaveButtonColor('warning')

There is no published config file; configure the plugin with the methods above.

#Translations

Heading, description, and the Stay / Leave labels are only customizable via translations (no plugin methods for copy). Publish and edit unsaved-changes-modal.php under your locale — keys live in navigation.*; see English (package also ships de).

php artisan vendor:publish --tag="filament-unsaved-changes-modal-translations"

#Views

Only if you want to change the Blade markup, copy the package views into your app:

php artisan vendor:publish --tag="filament-unsaved-changes-modal-views"

If you change the modal’s DOM id in a published view, keep it in sync with [MODAL_DOM_ID](src/FilamentUnsavedChangesModalPlugin.php) and the script hook view (the script opens and closes the modal by that id).

#Skipping the prompt for a link

Add data-skip-unsaved-changes-modal on the <a> or on any ancestor element (the listener uses closest(...)).

#Testing

composer test

#Changelog

CHANGELOG.md

#Contributing

CONTRIBUTING.md

#Security

SECURITY.md

#Credits

• Aziz Gasim
• Contributors

#License

MIT