Github
  1. Blade Components
  5. Alert

Alert

Display text that requires attention or provides additional information.

Usage

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

Component API

Attribute Default Description
title null string || null
Optional title for added clarity.
style default string
Possible values default, success, info, warning or danger.
icon null string
Optional component alias of the icon.

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

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>
Accordion
Avatar

On This Page