Alerts

Alert components provide contextual feedback messages for typical user actions. They are flexible, dismissible, and support all Bootstrap color variants.

Available Components

Alert

The main alert component for displaying informational messages with various styles and options.

Features:

All Bootstrap variants (primary, secondary, success, danger, warning, info, light, dark)
Dismissible alerts with close button
Optional title and icon support
Conditional rendering (show/hide)

Basic usage:

<x-alert variant="success">
    Operation completed successfully!
</x-alert>

<x-alert variant="danger" dismissible>
    An error occurred. Please try again.
</x-alert>

Common use cases

Flash messages

@if (session('success'))
    <x-alert variant="success" dismissible>
        {{ session('success') }}
    </x-alert>
@endif

@if (session('error'))
    <x-alert variant="danger" dismissible>
        {{ session('error') }}
    </x-alert>
@endif

Validation errors

@if ($errors->any())
    <x-alert variant="danger">
        <h4 class="alert-heading">Please fix the following errors:</h4>
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </x-alert>
@endif

Information boxes

<x-alert variant="info">
    <strong>Heads up!</strong> This alert provides additional context for your users.
</x-alert>

See the Alert component documentation for detailed usage and examples.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!