A modern, customizable alert box plugin for FilamentPHP with render hooks support. Create beautiful alerts with a fluent, chainable API across 4 different card styles.
AlertBox::make('Title')->success()->modernCard()->show()
Install the package via Composer:
composer require rifrocket/filament-alert-box
Register the plugin in your Panel provider:
use RifRocket\FilamentAlertBox\AlertBoxPlugin;Â public function panel(Panel $panel): Panel{ return $panel ->plugins([ AlertBoxPlugin::make(), ]);}
Optionally, publish the views:
php artisan vendor:publish --tag=alert-box-views
use RifRocket\FilamentAlertBox\Facades\AlertBox;Â // Simple success alertAlertBox::make('Operation Successful') ->success() ->show();Â // Error alert with descriptionAlertBox::make('Error Occurred') ->message('Something went wrong while processing your request.') ->danger() ->permanent() ->show();
Choose from 4 beautiful card styles:
// Style 1: Simple Banner (default)AlertBox::make('Welcome')->success()->bannerStyle()->show();Â // Style 2: Card with BorderAlertBox::make('Information')->info()->cardWithBorder()->show();Â // Style 3: Modern CardAlertBox::make('Warning')->warning()->modernCard()->show();Â // Style 4: MinimalistAlertBox::make('Update Available')->info()->minimalistStyle()->show();Â // Or use the generic methodAlertBox::make('Custom')->success()->cardStyle(2)->show();
Use position-specific methods to control WHERE alerts appear:
AlertBox::make('Header Alert')->success()->pageHeaderAfter()->show();AlertBox::make('Sidebar Alert')->warning()->sidebarNavEnd()->show();AlertBox::make('Topbar Alert')->info()->topBarStart()->show();AlertBox::make('Footer Alert')->info()->footer()->show();
Mix card styles with positions for complete control:
// Modern card in header positionAlertBox::make('Welcome')->success()->modernCard()->pageHeaderAfter()->show();Â // Minimalist style in topbarAlertBox::make('Quick Notice')->info()->minimalistStyle()->topBarStart()->show();Â // Bordered card at page endAlertBox::make('Done!')->success()->cardWithBorder()->pageEnd()->show();
// Success alertsAlertBox::make('Success!')->success()->show(); // Error/Danger alertsAlertBox::make('Error!')->danger()->show();AlertBox::make('Error!')->error()->show(); // Alias for danger // Warning alertsAlertBox::make('Warning!')->warning()->show(); // Info alerts (default)AlertBox::make('Information')->info()->show();
AlertBox::make('Custom Alert') ->message('This is the main message') ->description('Additional description text') ->icon('heroicon-o-check-circle') ->iconColor('#10b981') ->titleColor('#059669') ->success() ->modernCard() // Use modern card style ->pageHeaderAfter() // Position in header ->canBeClose(true) ->autoDisappear(10) // Auto-hide after 10 seconds ->classes('custom-alert-class') ->style('border: 2px solid red;') ->show();
// Auto-hide after 5 secondsAlertBox::make('Auto Hide') ->success() ->autoDisappear(5) ->show();Â // Permanent alert (user must close)AlertBox::make('Important Notice') ->warning() ->permanent() ->show();Â // Closeable controlAlertBox::make('Closeable Alert') ->info() ->canBeClose(false) // Cannot be closed by user ->show();
Convenience methods for rapid alert creation:
// Quick success alertAlertBox::success('Operation completed successfully!')->show();Â // Quick error alertAlertBox::error('Something went wrong!')->show();Â // Quick warning alertAlertBox::warning('Please check your input.')->show();Â // Quick info alertAlertBox::info('Here is some information.')->show();Â // Chain additional methods with quick methodsAlertBox::success('Data saved!') ->modernCard() ->autoDisappear(5) ->pageHeaderAfter() ->show();
Method | Description | Example |
---|---|---|
make(string $title = null) |
Create new alert builder | AlertBox::make('Title') |
title(string $title) |
Set alert title | ->title('Alert Title') |
message(string $message) |
Set alert message (alias for description) | ->message('Alert message') |
description(string $description) |
Set alert description | ->description('Alert description') |
cardStyle(int $style) |
Set card style (1-4) | ->cardStyle(2) |
bannerStyle() |
Simple banner style | ->bannerStyle() |
cardWithBorder() |
Card with border style | ->cardWithBorder() |
modernCard() |
Modern card style | ->modernCard() |
minimalistStyle() |
Minimalist style | ->minimalistStyle() |
icon(string $icon) |
Set alert icon | ->icon('heroicon-o-check') |
noIcon(bool $state = true) |
Disable alert icon | ->noIcon() |
iconColor(string $color) |
Set icon color | ->iconColor('#10b981') |
iconSize(string $size) |
Set icon size (xs, s, m, lg, xl) | ->iconSize('lg') |
iconXS() |
Set extra small icon | ->iconXS() |
iconS() |
Set small icon | ->iconS() |
iconM() |
Set medium icon (default) | ->iconM() |
iconLG() |
Set large icon | ->iconLG() |
iconXL() |
Set extra large icon | ->iconXL() |
titleColor(string $color) |
Set title color | ->titleColor('#059669') |
descriptionColor(string $color) |
Set description color | ->descriptionColor('#6b7280') |
success() |
Set as success alert | ->success() |
danger() |
Set as danger alert | ->danger() |
error() |
Alias for danger | ->error() |
warning() |
Set as warning alert | ->warning() |
info() |
Set as info alert | ->info() |
canBeClose(bool $closeable = true) |
Set closeable | ->canBeClose(false) |
autoDisappear(int $seconds) |
Auto-hide timeout | ->autoDisappear(10) |
permanent(bool $permanent = true) |
Make permanent | ->permanent() |
classes(string $classes) |
Add CSS classes | ->classes('my-class') |
style(string $style) |
Add inline styles | ->style('color: red;') |
position(string $position) |
Set custom position | ->position('custom-hook') |
renderHook(string $hook) |
Set render hook | ->renderHook(PanelsRenderHook::PAGE_START) |
show() |
Display the alert | ->show() |
Method | Description | Hook |
---|---|---|
pageHeaderAfter() |
After page header widgets | PAGE_HEADER_WIDGETS_AFTER |
pageStart() |
At page start | PAGE_START |
sidebarNavEnd() |
End of sidebar navigation | SIDEBAR_NAV_END |
topbarStart() |
Start of topbar | TOPBAR_START |
pageEnd() |
At page end | PAGE_END |
footer() |
In footer | FOOTER |
use RifRocket\FilamentAlertBox\AlertBoxManager;Â // Get alerts for position$alerts = AlertBoxManager::getAlerts('position');Â // Clear alerts for positionAlertBoxManager::clearAlerts('position');Â // Clear all alertsAlertBoxManager::clearAll();Â // Get alert count$count = AlertBoxManager::getAlertCount();
Clean, simple banner-style alert with a colored left border. Perfect for basic notifications.
Enhanced card with a full border, more padding, and refined styling. Great for important messages.
Premium card design with gradient top border, enhanced shadows, and sophisticated styling. Best for key announcements.
Compact, clean design with minimal styling. Perfect for subtle notifications and inline messages.
php artisan vendor:publish --tag=alert-box-views
The alert styles use Tailwind CSS utility classes exclusively. You can customize the appearance by publishing and modifying the Blade views at resources/views/vendor/alert-box/
.
Use any Heroicon or custom icon with different sizes:
AlertBox::make('Custom Icon') ->icon('heroicon-o-star') ->iconSize('lg') // or ->iconLG() ->success() ->show();
Choose from 5 different icon sizes:
// Extra Small (3x3)AlertBox::make('Minimal Alert')->iconXS()->info()->show();Â // Small (4x4)AlertBox::make('Small Alert')->iconS()->warning()->show();Â // Medium (6x6) - DefaultAlertBox::make('Normal Alert')->iconM()->success()->show();Â // Large (8x8)AlertBox::make('Important Alert')->iconLG()->danger()->show();Â // Extra Large (10x10)AlertBox::make('Critical Alert')->iconXL()->error()->show();
Contributions are welcome! Please feel free to submit a Pull Request.
The MIT License (MIT). Please see License File for more information.
If you find this package helpful, please consider starring the repository!
Mohammad Arif is a passionate Laravel and FilamentPHP developer focused on creating practical, well-documented packages that enhance developer productivity. With expertise in modern web technologies and UI/UX design, Mohammad builds tools that solve real-world problems while maintaining high code quality and comprehensive documentation.
When not coding, Mohammad enjoys exploring new technologies and contributing to the open-source community. He believes in creating software that is not only functional but also enjoyable to use.