README

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.

Installation

You can install the package via composer:

composer require codewithdennis/filament-simple-alert:4.x

Custom Theme

You 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}');

Usage

Make sure to import the SimpleAlert component at the top of your file:

use CodeWithDennis\SimpleAlert\Components\SimpleAlert;

Predefined Alerts

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')

Icon

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')))

Icon Animation

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)

Icon Vertical Alignment

You can change the vertical alignment of the icon by using the iconVerticalAlignment method.

SimpleAlert::make('example')
    ->iconVerticalAlignment('start'), // possible values: start, center

Title

You can add a title to the alert by using the title method.

SimpleAlert::make('example')
    ->title('Hoorraayy! Your request has been approved! 🎉')

Description

You can add a description to the alert by using the description method.

SimpleAlert::make('example')
    ->description('This is the description')

Border

You can add a border to the alert by using the border method.

SimpleAlert::make('example')
    ->border()

Actions

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'),
    ]),

Actions Vertical Alignment

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, center

Example

use 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'),
    ]),

codewithdennis / filament-simple-alert

Maintainers

Details