> ## 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 2.x, which is a previous version of Filament.
Looking for the current stable version? Visit the [5.x documentation](/5.x/notifications).
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's multiple options.
## Styling notifications
Notifications have dedicated CSS classes you can hook into to apply your own styling:
* `filament-notifications`
* `filament-notifications-notification`
* `filament-notifications-icon`
* `filament-notifications-title`
* `filament-notifications-close-button`
* `filament-notifications-date`
* `filament-notifications-body`
* `filament-notifications-actions`
## 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('notifications.notification');
});
```
Next, create the view, in this example `resources/views/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
```
## 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()->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 `boot()` 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