Sending notifications

To start, make sure the package is installed - @livewire('notifications') should be in your Blade layout somewhere.

Notifications are sent using a Notification object that's constructed through a fluent API. Calling the send() method on the Notification object will dispatch the notification and display it in your application. As the session is used to flash notifications, they can be sent from anywhere in your code, not just Livewire components.

<?php
 
namespace App\Http\Livewire;
 
use Filament\Notifications\Notification;
use Livewire\Component;
 
class EditPost extends Component
{
public function save(): void
{
// ...
 
Notification::make()
->title('Saved successfully')
->success()
->send();
}
}

Notification

Title

The main message of the notification is shown in the title. You can set the title as follows:

use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->send();

Markdown text will automatically be rendered if passed to the title.

Icon

Optionally, a notification can have an icon that's displayed in front of its content. You may also set a color for the icon, which defaults to the secondary color specified in your tailwind.config.js file. The icon can be the name of any Blade component. By default, the Blade Heroicons package is installed, so you may use the name of any Heroicon out of the box. However, you may create your own custom icon components or install an alternative library if you wish.

use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->icon('heroicon-o-document-text')
->iconColor('success')
->send();

Notification with icon

Notifications often have a status like success, warning or danger. Instead of manually setting the corresponding icons and colors, there's a status() method which you can pass the status. You may also use the dedicated success(), warning() and danger() methods instead. So, cleaning up the above example would look like this:

use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->send();

Success, warning and danger notifications

Duration

By default, notifications are shown for 6 seconds before they're automatically closed. You may specify a custom duration value in milliseconds as follows:

use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->duration(5000)
->send();

If you prefer setting a duration in seconds instead of milliseconds, you can do so:

use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->seconds(5)
->send();

You might want some notifications to not automatically close and require the user to close them manually. This can be achieved by making the notification persistent:

use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->persistent()
->send();

Body

Additional notification text can be shown in the body. Similar to the title, it supports Markdown:

use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->body('Changes to the **post** have been saved.')
->send();

Notification with Markdown body

Actions

Notifications support actions that render a button or link which may open a URL or emit a Livewire event. Actions will render as link by default, but you may configure it to render a button using the button() method. Actions can be defined as follows:

use Filament\Notifications\Actions\Action;
use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->body('Changes to the **post** have been saved.')
->actions([
Action::make('view')
->button(),
Action::make('undo')
->color('secondary'),
])
->send();

Notification with actions

Opening URLs

If clicking on an action should open a URL, optionally in a new tab, you can do so:

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

Emitting events

Sometimes you want to execute additional code when a notification action is clicked. This can be achieved by setting a Livewire event which should be emitted on clicking the action. You may optionally pass an array of data, which will be available as parameters in the event listener on your Livewire component:

use Filament\Notifications\Actions\Action;
use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->body('Changes to the **post** have been saved.')
->actions([
Action::make('view')
->button()
->url(route('posts.show', $post), shouldOpenInNewTab: true),
Action::make('undo')
->color('secondary')
->emit('undoEditingPost', [$post->id]),
])
->send();

Closing notifications

After opening a URL or emitting an event from your action, you may want to close the notification right away:

use Filament\Notifications\Actions\Action;
use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->body('Changes to the **post** have been saved.')
->actions([
Action::make('view')
->button()
->url(route('posts.show', $post), shouldOpenInNewTab: true),
Action::make('undo')
->color('secondary')
->emit('undoEditingPost', [$post->id])
->close(),
])
->send();
Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion

Enjoying Filament?

We are open source at heart. To allow us to build new features, fix bugs, and run the community, we require your financial support.

Sponsor Filament on GitHub