Alert - Laravel Blade

Show contextual information to your users using alert elements based on Tailwind CSS, available in multiple colors, styles, and dismissible options.

Default Alerts

Blade code

<div class="space-y-4">
    <x-fwb.alert color="blue">
        <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
    </x-fwb.alert>
    <x-fwb.alert color="red">
        <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
    </x-fwb.alert>
    <x-fwb.alert color="green">
        <span class="font-medium">Success alert!</span> Change a few things up and try submitting again.
    </x-fwb.alert>
    <x-fwb.alert color="yellow">
        <span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
    </x-fwb.alert>
    <x-fwb.alert color="gray">
        <span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.
    </x-fwb.alert>
</div>

Alerts with Icon

Blade code

<div class="space-y-4">
    <x-fwb.alert color="blue" fwb-icon="o-info-circle">
        <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
    </x-fwb.alert>
    <x-fwb.alert color="red" fwb-icon="o-info-circle">
        <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
    </x-fwb.alert>
</div>

Dismissible Alerts

Blade code

<div class="space-y-4">
    <x-fwb.alert color="blue" :dismissible="true">
        <span class="font-medium">Info alert!</span> Click the close button to dismiss.
    </x-fwb.alert>
    <x-fwb.alert color="red" :dismissible="true">
        <span class="font-medium">Danger alert!</span> Click the close button to dismiss.
    </x-fwb.alert>
    <x-fwb.alert color="green" :dismissible="true">
        <span class="font-medium">Success alert!</span> Click the close button to dismiss.
    </x-fwb.alert>
    <x-fwb.alert color="yellow" :dismissible="true">
        <span class="font-medium">Warning alert!</span> Click the close button to dismiss.
    </x-fwb.alert>
    <x-fwb.alert color="gray" :dismissible="true">
        <span class="font-medium">Dark alert!</span> Click the close button to dismiss.
    </x-fwb.alert>
</div>

Border Accent Alerts

Blade code

<div class="space-y-4">
    <x-fwb.alert color="blue" :bordered="true">
        <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
    </x-fwb.alert>
    <x-fwb.alert color="red" :bordered="true">
        <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
    </x-fwb.alert>
    <x-fwb.alert color="green" :bordered="true">
        <span class="font-medium">Success alert!</span> Change a few things up and try submitting again.
    </x-fwb.alert>
    <x-fwb.alert color="yellow" :bordered="true">
        <span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
    </x-fwb.alert>
    <x-fwb.alert color="gray" :bordered="true">
        <span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.
    </x-fwb.alert>
</div>

Additional Content

Blade code

<x-fwb.alert color="blue" :dismissible="true" fwb-icon="o-info-circle">
    <div>
        <span class="text-lg font-medium">This is an info alert</span>
        <div class="mt-2 mb-4 text-sm">More info about this info alert goes here. This example text provides additional context.</div>
        <div class="flex gap-2">
            <button type="button" class="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 dark:bg-blue-200 dark:text-gray-800 dark:hover:bg-blue-300">View more</button>
            <button type="button" class="text-blue-800 bg-transparent border border-blue-800 hover:bg-blue-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 dark:hover:bg-blue-300 dark:border-blue-200 dark:text-blue-200 dark:hover:text-gray-800">Dismiss</button>
        </div>
    </div>
</x-fwb.alert>

Alert with List

Blade code

<x-fwb.alert color="red" fwb-icon="o-info-circle">
    <div>
        <span class="font-medium">Ensure that these requirements are met:</span>
        <ul class="mt-1.5 list-disc list-inside">
            <li>At least 10 characters (and up to 100 characters)</li>
            <li>At least one lowercase character</li>
            <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
        </ul>
    </div>
</x-fwb.alert>

Component Properties

Alert x-fwb.alert

Prop Type Default Description
color string blue Alert color theme. Options: blue, red, green, yellow, gray.
dismissible bool false Show a close button that allows the user to dismiss the alert.
bordered bool false Add a top border accent to the alert.
fwb-icon string|null null Shorthand icon name from flowbite-blade-icons (e.g. o-info-circle). Renders with default shrink-0 w-4 h-4 classes.
icon slot — Named slot for full icon control. Takes priority over fwb-icon prop.
id string auto Unique identifier for the alert. Auto-generated if not provided. Used for dismiss targeting.