> ## Documentation Index
> Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Sending notifications
export const EditOnGitHub = ({version, path}) => {
const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`;
return ;
};
export const Footer = () => {
const sponsorsByTier = JSON.parse(`{
"agency_partner": [
{
"name": "Kirschbaum",
"url": "https://kirschbaumdevelopment.com/solutions/filament-development",
"filename": "kirschbaum.svg"
}
],
"gold": [
{
"name": "Agiledrop",
"url": "https://www.agiledrop.com/laravel?utm_source=filament",
"filename": "agiledrop.svg"
},
{
"name": "Baiz.ai",
"url": "https://baiz.ai",
"filename": "baiz-ai.svg"
},
{
"name": "CMS Max",
"url": "https://cmsmax.com?ref=filamentphp.com",
"filename": "cms-max.svg"
},
{
"name": "Mailtrap",
"url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament",
"filename": "mailtrap.svg"
},
{
"name": "SerpApi",
"url": "https://serpapi.com/?utm_source=filamentphp",
"filename": "serpapi.svg"
}
]
}`);
function shuffleArray(items) {
const result = [...items];
for (let index = result.length - 1; index > 0; index--) {
const randomIndex = Math.floor(Math.random() * (index + 1));
[result[index], result[randomIndex]] = [result[randomIndex], result[index]];
}
return result;
}
const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors));
return ;
};
> To start, make sure the package is [installed](./installation) - `@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, including JavaScript, not just Livewire components.
```php theme={"theme":"gruvbox-dark-hard"}
title('Saved successfully')
->success()
->send();
}
}
```
## Title
The main message of the notification is shown in the title. You can set the title as follows:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->send();
```
Or with JavaScript:
```js theme={"theme":"gruvbox-dark-hard"}
new Notification()
.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 v1](https://github.com/blade-ui-kit/blade-heroicons/tree/1.3.1) package is installed, so you may use the name of any [Heroicons v1](https://v1.heroicons.com) out of the box. However, you may create your own custom icon components or install an alternative library if you wish.
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->icon('heroicon-o-document-text')
->iconColor('success')
->send();
```
Or with JavaScript:
```js theme={"theme":"gruvbox-dark-hard"}
new Notification()
.title('Saved successfully')
.icon('heroicon-o-document-text')
.iconColor('success')
.send()
```
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:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->success()
->send();
```
Or with JavaScript:
```js theme={"theme":"gruvbox-dark-hard"}
new Notification()
.title('Saved successfully')
.success()
.send()
```
## 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:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->success()
->duration(5000)
->send();
```
Or with JavaScript:
```js theme={"theme":"gruvbox-dark-hard"}
new Notification()
.title('Saved successfully')
.success()
.duration(5000)
.send()
```
If you prefer setting a duration in seconds instead of milliseconds, you can do so:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->success()
->seconds(5)
->send();
```
Or with JavaScript:
```js theme={"theme":"gruvbox-dark-hard"}
new Notification()
.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:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->success()
->persistent()
->send();
```
Or with JavaScript:
```js theme={"theme":"gruvbox-dark-hard"}
new Notification()
.title('Saved successfully')
.success()
.persistent()
.send()
```
## Body
Additional notification text can be shown in the body. Similar to the title, it supports Markdown:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->success()
->body('Changes to the **post** have been saved.')
->send();
```
Or with JavaScript:
```js theme={"theme":"gruvbox-dark-hard"}
new Notification()
.title('Saved successfully')
.success()
.body('Changes to the **post** have been saved.')
.send()
```
## 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:
```php theme={"theme":"gruvbox-dark-hard"}
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();
```
Or with JavaScript:
```js theme={"theme":"gruvbox-dark-hard"}
new Notification()
.title('Saved successfully')
.success()
.body('Changes to the **post** have been saved.')
.actions([
new NotificationAction('view')
.button(),
new NotificationAction('undo')
.color('secondary'),
])
.send()
```
### Opening URLs
If clicking on an action should open a URL, optionally in a new tab, you can do so:
```php theme={"theme":"gruvbox-dark-hard"}
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();
```
Or with JavaScript:
```js theme={"theme":"gruvbox-dark-hard"}
new Notification()
.title('Saved successfully')
.success()
.body('Changes to the **post** have been saved.')
.actions([
new NotificationAction('view')
.button()
.url('/view')
.openUrlInNewTab(),
new NotificationAction('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:
```php theme={"theme":"gruvbox-dark-hard"}
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();
```
You can also `emitSelf`, `emitUp` and `emitTo`:
```php theme={"theme":"gruvbox-dark-hard"}
Action::make('undo')
->color('secondary')
->emitSelf('undoEditingPost', [$post->id])
Action::make('undo')
->color('secondary')
->emitUp('undoEditingPost', [$post->id])
Action::make('undo')
->color('secondary')
->emitTo('another_component', 'undoEditingPost', [$post->id])
```
Or with JavaScript:
```js theme={"theme":"gruvbox-dark-hard"}
new Notification()
.title('Saved successfully')
.success()
.body('Changes to the **post** have been saved.')
.actions([
new NotificationAction('view')
.button()
.url('/view')
.openUrlInNewTab(),
new NotificationAction('undo')
.color('secondary')
.emit('undoEditingPost'),
])
.send()
```
Similarly, `emitSelf`, `emitUp` and `emitTo` are also available:
```js theme={"theme":"gruvbox-dark-hard"}
new NotificationAction('undo')
.color('secondary')
.emitSelf('undoEditingPost')
new NotificationAction('undo')
.color('secondary')
.emitUp('undoEditingPost')
new NotificationAction('undo')
.color('secondary')
.emitTo('another_component', 'undoEditingPost')
```
### Closing notifications
After opening a URL or emitting an event from your action, you may want to close the notification right away:
```php theme={"theme":"gruvbox-dark-hard"}
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();
```
Or with JavaScript:
```js theme={"theme":"gruvbox-dark-hard"}
new Notification()
.title('Saved successfully')
.success()
.body('Changes to the **post** have been saved.')
.actions([
new NotificationAction('view')
.button()
.url('/view')
.openUrlInNewTab(),
new NotificationAction('undo')
.color('secondary')
.emit('undoEditingPost')
.close(),
])
.send()
```
## Using the JavaScript objects
The JavaScript objects (`Notification` and `NotificationAction`) are assigned to `window.Notification` and `window.NotificationAction`, so they are available in on-page scripts.
You may also import them in a bundled JavaScript file:
```js theme={"theme":"gruvbox-dark-hard"}
import { Notification, NotificationAction } from '../../vendor/filament/notifications/dist/module.esm'
You are currently viewing the documentation for Filament 2.x, which is a previous version of Filament.
Looking for the current stable version? Visit the [5.x documentation](/5.x/notifications).
// ...
```
)}
Your logo here