Notifications Overview

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

Status and icons

Notifications can display status indicators with appropriate icons and colors:

Notification::make()
    ->title('User created')
    ->success()
    ->send();

Notification::make()
    ->title('Disk space low')
    ->warning()
    ->send();

Notification::make()
    ->title('An error occurred')
    ->danger()
    ->send();

Notification::make()
    ->title('New feature available')
    ->info()
    ->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

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:

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

Getting Started

Panel Builder

Core Concepts

Building Blocks

Advanced

Notifications Overview

Introduction

Sending a basic notification

Notification content

Status and icons

Custom icons

Background colors

Duration and persistence

Notification actions

Opening URLs

Dispatching Livewire events

Sending from JavaScript

Importing in bundled JavaScript

Closing notifications

Positioning notifications

​Introduction

​Sending a basic notification

​Notification content

​Status and icons

​Custom icons

​Background colors

​Duration and persistence

​Notification actions

​Opening URLs

​Dispatching Livewire events

​Sending from JavaScript

​Importing in bundled JavaScript

​Closing notifications

​Positioning notifications

Introduction

Sending a basic notification

Notification content

Status and icons

Custom icons

Background colors

Duration and persistence

Notification actions

Opening URLs

Dispatching Livewire events

Sending from JavaScript

Importing in bundled JavaScript

Closing notifications

Positioning notifications