diff --git a/packages/notifications/docs/02-sending-notifications.md b/packages/notifications/docs/02-sending-notifications.md index 2345e1a2f4..5910b6f74a 100644 --- a/packages/notifications/docs/02-sending-notifications.md +++ b/packages/notifications/docs/02-sending-notifications.md @@ -414,6 +414,28 @@ new FilamentNotification() .send() ``` +## Close notification + +You can close a notification automatically by dispatching a browser event on the window called `close-notification`. + +```php +use Filament\Notifications\Notification; + +Notification::make('custom') + ->persistent() + ->send() +``` + +Close from within Livewire page +```php +$this->dispatch('close-notification', id: 'custom'); +``` + +Or frontend Alpine.js +```blade + +``` + ## Using the JavaScript objects The JavaScript objects (`FilamentNotification` and `FilamentNotificationAction`) are assigned to `window.FilamentNotification` and `window.FilamentNotificationAction`, so they are available in on-page scripts. diff --git a/packages/notifications/resources/views/components/notification.blade.php b/packages/notifications/resources/views/components/notification.blade.php index 902078d36d..b336208f3d 100644 --- a/packages/notifications/resources/views/components/notification.blade.php +++ b/packages/notifications/resources/views/components/notification.blade.php @@ -8,6 +8,7 @@ $attributes ->merge([ 'wire:key' => "{$this->getId()}.notifications.{$notification->getId()}", + 'x-on:close-notification.window' => "if (\$event.detail.id == '{$notification->getId()}') close()", ], escape: false) ->class(['pointer-events-auto invisible']) }}