Alert

#

Usage

<x-alert>This alert details some information.</x-alert>

#

Component API

#

Title

For added clarity a title can be added to the alert by supplying the title="" attribute.

<x-alert title="Important">
    This alert details some information.
</x-alert>

#

Style

Control the alert style by supplying 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

You can control the icon per alert instance by supplying 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>

#

Customizing the default icons

The alert component uses the blade-ui-kit/blade-heroicons icon set by default.

You can customize the default icons globally by calling either the setDefaultIcons() or setDefaultIconForStyle() method from a service provider's boot() method, or middleware.

The setDefaultIcons() method takes an array of icon definitions.

<?php

use DistortedFusion\BladeComponents\Components\Alert\Index as Alert;

Alert::setDefaultIcons([
    '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',
]);

The setDefaultIconForStyle() method sets the icon for a specific style.

<?php

use DistortedFusion\BladeComponents\Components\Alert\Index as Alert;

Alert::setDefaultIconForStyle(
    style: 'default',
    icon: 'heroicon-o-information-circle'
);