Skip to main content

​
Introduction

Filament’s notification system allows you to send flash notifications to users that appear in the corner of the screen. Notifications are built using a fluent API and can be sent from anywhere in your application - Livewire components, controllers, jobs, or even JavaScript.

​
Sending a basic notification

Create and send a notification using the make() method: 
use Filament\Notifications\Notification;

Notification::make()
    ->title('Saved successfully')
    ->success()
    ->send();
Since notifications use the session, they can be sent from any part of your code, not just Livewire components.

​
Notification content

1
Setting the title
2
The title is the main message displayed to users:
3
Notification::make()
    ->title('Saved successfully')
    ->send();
4
Titles support basic HTML and Markdown:
5
use Illuminate\Support\Str;

Notification::make()
    ->title(Str::markdown('Your **post** has been saved'))
    ->send();
6
Adding body text
7
Provide additional details in the body:
8
Notification::make()
    ->title('Saved successfully')
    ->body('Changes to the post have been saved.')
    ->send();
9
The body also supports HTML and Markdown:
10
Notification::make()
    ->title('Saved successfully')
    ->body(Str::markdown('Changes to the **post** have been saved.'))
    ->send();

​
Status and icons

Notifications can display status indicators with appropriate icons and colors: 
Notification::make()
    ->title('User created')
    ->success()
    ->send();

​
Custom icons

Set a custom icon and color: 
Notification::make()
    ->title('Settings updated')
    ->icon('heroicon-o-cog-6-tooth')
    ->iconColor('primary')
    ->send();

​
Background colors

Add a background color to make notifications more prominent: 
Notification::make()
    ->title('Saved successfully')
    ->color('success')
    ->send();

​
Duration and persistence

1
Setting duration
2
By default, notifications close after 6 seconds. Customize the duration in milliseconds:
3
Notification::make()
    ->title('Saved successfully')
    ->duration(5000) // 5 seconds
    ->send();
4
Or use seconds:
5
Notification::make()
    ->title('Saved successfully')
    ->seconds(5)
    ->send();
6
Making notifications persistent
7
Require manual dismissal:
8
Notification::make()
    ->title('Important update')
    ->body('Please review these changes carefully.')
    ->persistent()
    ->send();

​
Notification actions

Add interactive buttons to your notifications: 
use Filament\Actions\Action;
use Filament\Notifications\Notification;

Notification::make()
    ->title('Saved successfully')
    ->body('Changes to the post have been saved.')
    ->actions([
        Action::make('view')
            ->button()
            ->url(route('posts.show', $post), shouldOpenInNewTab: true),
        Action::make('undo')
            ->color('gray'),
    ])
    ->send();

​
Opening URLs

Actions can open URLs when clicked: 
Action::make('view')
    ->button()
    ->url(route('posts.show', $post), shouldOpenInNewTab: true)

​
Dispatching Livewire events

Trigger Livewire events from notification actions: 
Action::make('undo')
    ->dispatch('undoEdit', [$post->id])
    ->close() // Close notification after clicking
You can also use dispatchSelf() and dispatchTo(): 
Action::make('refresh')
    ->dispatchSelf('refreshData')

Action::make('notify')
    ->dispatchTo('admin-panel', 'notify', [$message])

​
Sending from JavaScript

Create notifications from JavaScript using the global FilamentNotification object: 
new FilamentNotification()
    .title('Saved successfully')
    .success()
    .send()
With actions: 
new FilamentNotification()
    .title('Saved successfully')
    .body('Changes have been saved.')
    .actions([
        new FilamentNotificationAction('view')
            .button()
            .url('/posts/123'),
        new FilamentNotificationAction('undo')
            .color('gray')
            .dispatch('undoEdit'),
    ])
    .send()

​
Importing in bundled JavaScript

If you’re using a JavaScript bundler: 
import { Notification, NotificationAction } from '../../vendor/filament/notifications/dist/index.js'

new Notification()
    .title('Saved successfully')
    .send()

​
Closing notifications

Close a notification programmatically by dispatching a browser event:
1
Get the notification ID
2
$notification = Notification::make()
    ->title('Processing...')
    ->persistent()
    ->send();

$notificationId = $notification->getId();
3
Dispatch the close event
4
From Livewire:
5
$this->dispatch('close-notification', id: $notificationId);
6
From JavaScript:
7
<button 
    x-on:click="$dispatch('close-notification', { id: '{{ $notificationId }}' })"
    type="button"
>
    Close Notification
</button>
8
Using custom IDs
9
Assign a custom ID for easier tracking:
10
Notification::make('greeting')
    ->title('Hello!')
    ->persistent()
    ->send();
11
Then close it:
12
<button x-on:click="$dispatch('close-notification', { id: 'greeting' })" type="button">
    Close
</button>
Using random IDs is recommended to avoid accidentally closing the wrong notification. Only use custom IDs when you can guarantee uniqueness.

​
Positioning notifications

Configure the global position of notifications in a service provider or middleware: 
use Filament\Notifications\Livewire\Notifications;
use Filament\Support\Enums\Alignment;
use Filament\Support\Enums\VerticalAlignment;

Notifications::alignment(Alignment::Start);
Notifications::verticalAlignment(VerticalAlignment::End);
Available positions:
  • Horizontal: Alignment::Start, Alignment::Center, Alignment::End
  • Vertical: VerticalAlignment::Start, VerticalAlignment::Center, VerticalAlignment::End

Build docs developers (and LLMs) love

Get started for freeTalk to us