Alert
Display text that requires attention or provides additional information.
#Usage
<x-alert>This alert details some information.</x-alert>
#Title
For added clarity, add a title using the title attribute.
<x-alert title="Important">
This alert details some information.
</x-alert>
#Style
Control the alert style by setting the style attribute.
<div class="space-y-2">
<x-alert style="default">
This alert details some information.
</x-alert>
<x-alert style="success">
This alert details a success.
</x-alert>
<x-alert style="info">
This alert details some information.
</x-alert>
<x-alert style="warning">
This alert details a warning.
</x-alert>
<x-alert style="danger">
This alert details an error.
</x-alert>
</div>
#Icon
Control the icon per alert instance by setting the icon attribute. Any blade-ui-kit/blade-icons compatible icon set can be used.
<x-alert style="warning" icon="heroicon-o-bolt">
This alert details some information.
</x-alert>
#Default Icons
The alert component uses the blade-ui-kit/blade-heroicons icon set by default.
| Style | Default Icon |
|---|---|
default |
heroicon-o-information-circle |
success |
heroicon-o-check-circle |
info |
heroicon-o-information-circle |
warning |
heroicon-o-exclamation-circle |
danger |
heroicon-o-x-circle |
You can customize the default icons globally through the BladeComponents service or via the component directly from a service provider's boot() method, or middleware.
The setDefaultAlertIcons() or setDefaultIcons() method takes an array of icon definitions.
<?php
use DistortedFusion\BladeComponents\BladeComponents;
use DistortedFusion\BladeComponents\Components\Alert\Index as Alert;
$icons = [
'default' => 'heroicon-o-information-circle',
'success' => 'heroicon-o-check-circle',
'info' => 'heroicon-o-information-circle',
'warning' => 'heroicon-o-exclamation-circle',
'danger' => 'heroicon-o-x-circle',
];
BladeComponents::setDefaultAlertIcons(icons: $icons);
Alert::setDefaultIcons(icons: $icons);
The setDefaultAlertIconForStyle() or setDefaultIconForStyle() method sets the icon for a specific style.
<?php
use DistortedFusion\BladeComponents\BladeComponents;
use DistortedFusion\BladeComponents\Components\Alert\Index as Alert;
BladeComponents::setDefaultAlertIconForStyle(
style: 'default',
icon: 'heroicon-o-information-circle'
);
Alert::setDefaultIconForStyle(
style: 'default',
icon: 'heroicon-o-information-circle'
);
#Component API
#x-alert
| Attribute | Default | Description |
|---|---|---|
title |
null |
string || nullOptional title for added clarity. |
style |
default |
stringPossible values default, success, info, warning or danger. |
icon |
null |
stringOptional component alias of the icon. |