> ## 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.
# Customizing 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 ;
};
You are currently viewing the documentation for Filament 3.x, which is a previous version of Filament.
Looking for the current stable version? Visit the [5.x documentation](/docs/5.x/notifications).
## Overview
Notifications come fully styled out of the box. However, if you want to apply your own styling or use a custom view to render notifications, there are multiple options.
## Styling notifications
Notifications have dedicated CSS classes you can hook into to apply your own styling. Open the inspector in your browser to find out which classes you need to target.
## Positioning notifications
You can configure the alignment of the notifications in a service provider or middleware, by calling `Notifications::alignment()` and `Notifications::verticalAlignment()`. You can pass `Alignment::Start`, `Alignment::Center`, `Alignment::End`, `VerticalAlignment::Start`, `VerticalAlignment::Center` or `VerticalAlignment::End`:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Notifications\Livewire\Notifications;
use Filament\Support\Enums\Alignment;
use Filament\Support\Enums\VerticalAlignment;
Notifications::alignment(Alignment::Start);
Notifications::verticalAlignment(VerticalAlignment::End);
```
## Using a custom notification view
If your desired customization can't be achieved using the CSS classes above, you can create a custom view to render the notification. To configure the notification view, call the static `configureUsing()` method inside a service provider's `boot()` method and specify the view to use:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Notifications\Notification;
Notification::configureUsing(function (Notification $notification): void {
$notification->view('filament.notifications.notification');
});
```
Next, create the view, in this example `resources/views/filament/notifications/notification.blade.php`. The view should use the package's base notification component for the notification functionality and pass the available `$notification` variable through the `notification` attribute. This is the bare minimum required to create your own notification view:
```blade theme={"theme":"gruvbox-dark-hard"}
{{-- Notification content --}}
```
Getters for all notification properties will be available in the view. So, a custom notification view might look like this:
```blade theme={"theme":"gruvbox-dark-hard"}
{{ $getTitle() }}
{{ $getDate() }}
{{ $getBody() }}
Close
```
## Using a custom notification object
Maybe your notifications require additional functionality that's not defined in the package's `Notification` class. Then you can create your own `Notification` class, which extends the package's `Notification` class. For example, your notification design might need a size property.
Your custom `Notification` class in `app/Notifications/Notification.php` might contain:
```php theme={"theme":"gruvbox-dark-hard"}
$this->getSize(),
];
}
public static function fromArray(array $data): static
{
return parent::fromArray($data)->size($data['size']);
}
public function size(string $size): static
{
$this->size = $size;
return $this;
}
public function getSize(): string
{
return $this->size;
}
}
```
Next, you should bind your custom `Notification` class into the container inside a service provider's `register()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Notifications\Notification;
use Filament\Notifications\Notification as BaseNotification;
$this->app->bind(BaseNotification::class, Notification::class);
```
You can now use your custom `Notification` class in the same way as you would with the default `Notification` object.
)}
Your logo here