If you're using Filament 3.x, check out the compatible version of this package here.
This package offers a straightforward and easy-to-use alert component for your Filament application. It allows you to quickly implement customizable alert messages, enhancing the user experience by providing clear and concise notifications.
Caution
Filament 4 is currently in beta — use it cautiously in production.
You can install the package via composer:
composer require codewithdennis/filament-simple-alert:4.xYou will need to create a custom theme for the styles to be applied correctly.
Make sure you add the following to your theme.css file.
@source '../../../../vendor/codewithdennis/filament-simple-alert/resources/**/*.blade.php';
@source inline('animate-{spin,pulse,bounce}');Make sure to import the SimpleAlert component at the top of your file:
use CodeWithDennis\SimpleAlert\Components\SimpleAlert;There are 4 types predefined of simple alerts: danger, info, success, and warning.
SimpleAlert::make('example')
->danger()
->info()
->success()
->warning()If you would like to use a different color, you can use the color method.
SimpleAlert::make('example')
->color('purple')By default, simple alerts come with an icon. For example, the ->danger() method includes a heroicon-s-x-circle icon. If you want to use a different icon, you can use the icon method.
SimpleAlert::make('example')
->color('purple')
->icon('heroicon-s-users')Or you can use a custom icon by passing an HTML string or a Blade component to the icon method.
SimpleAlert::make('example')
->icon(new HtmlString('🤓'))
->icon(new HtmlString(Blade::render('my-custom-icon-component')))You can add animation to the icon by passing the animation type as the second parameter to the icon method. Make sure to use the IconAnimation enum for the animation type.
use CodeWithDennis\SimpleAlert\Components\Enums\IconAnimation;
SimpleAlert::make('example')
->icon('heroicon-s-arrow-path', IconAnimation::Spin)You can change the vertical alignment of the icon by using the iconVerticalAlignment method.
SimpleAlert::make('example')
->iconVerticalAlignment('start'), // possible values: start, centerYou can add a title to the alert by using the title method.
SimpleAlert::make('example')
->title('Hoorraayy! Your request has been approved! 🎉')You can add a description to the alert by using the description method.
SimpleAlert::make('example')
->description('This is the description')You can add a border to the alert by using the border method.
SimpleAlert::make('example')
->border()You can also add actions to the alert by using the actions method. All regular action features are supported.
use Filament\Actions\Action;
SimpleAlert::make('example')
->columnSpanFull()
->success()
->title('Simple Alert')
->description('This is an example of a simple alert.')
->actions([
Action::make('read-example')
->label('Read more')
->url('https://filamentphp.com')
->openUrlInNewTab()
->color('info'),
]),You can change the vertical alignment of the actions by using the actionsVerticalAlignment method.
use Filament\Actions\Action;
SimpleAlert::make('example')
->actionsVerticalAlignment('start'), // possible values: start, centeruse Filament\Actions\Action;
SimpleAlert::make('example')
->success()
->title(new HtmlString('<strong>Hoorraayy! Your request has been approved! 🎉</strong>'))
->description('Lorem ipsum dolor sit amet consectetur adipisicing elit.')
->actions([
Action::make('filament')
->label('Details')
->icon('heroicon-m-arrow-long-right')
->iconPosition(IconPosition::After)
->link()
->url('https://filamentphp.com')
->openUrlInNewTab()
->color('success'),
]),Please see CONTRIBUTING for details.
The MIT License (MIT). Please see License File for more information.