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>

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 || 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.

On This Page
↓ ↑

Select

↵

Open

esc

Close