Alert Components

Alert components provide visual feedback to users about the status of operations, important information, warnings, or errors. LaraDashboard includes multiple alert variants for different contexts.

Available Alert Components#

Component	Purpose	Auto-dismiss
<x-alerts.success>	Success messages	Yes (5s)
<x-alerts.error>	Error messages	No
<x-alerts.warning>	Warning messages	No
<x-alerts.info>	Informational messages	No
<x-alerts.default>	Neutral messages	No
<x-alerts.errors>	Validation errors list	No

---

Success Alert#

Displays a success message with a green color scheme and checkmark icon. Auto-dismisses after 5 seconds by default.

Props#

Prop	Type	Default	Description
message	string	required	The success message to display
autoDismiss	boolean	true	Whether to auto-dismiss after 5 seconds

Basic Usage#

<x-alerts.success message="User created successfully!" />

Without Auto-dismiss#

<x-alerts.success message="Settings saved!" :autoDismiss="false" />

With Livewire Session Flash#

// In your Livewire component
session()->flash('success', 'Operation completed successfully!');

{{-- In your blade template --}}
@if(session('success'))
    <x-alerts.success :message="session('success')" />
@endif

Real Example from Codebase#

{{-- From user management pages --}}
@if(session('success'))
    <x-alerts.success message="{{ session('success') }}" />
@endif

---

Error Alert#

Displays an error message with a red color scheme and error icon. Does not auto-dismiss.

Props#

Prop	Type	Default	Description
message	string	required	The error message to display

Basic Usage#

<x-alerts.error message="Failed to save changes. Please try again." />

With Conditional Display#

@if($error)
    <x-alerts.error :message="$error" />
@endif

Real Example from Codebase#

{{-- Displaying operation errors --}}
@if(session('error'))
    <x-alerts.error message="{{ session('error') }}" />
@endif

---

Warning Alert#

Displays a warning message with a yellow/amber color scheme and warning icon.

Props#

Prop	Type	Default	Description
message	string	required	The warning message to display

Basic Usage#

<x-alerts.warning message="Your subscription expires in 3 days." />

With HTML Content#

The message prop supports HTML content for rich formatting:

<x-alerts.warning message="Please <strong>backup your data</strong> before proceeding." />

Real Example from Codebase#

{{-- Warning about important actions --}}
<x-alerts.warning message="This action cannot be undone. Please proceed with caution." />

---

Info Alert#

Displays an informational message with a blue color scheme and info icon.

Props#

Prop	Type	Default	Description
message	string	required	The informational message to display

Basic Usage#

<x-alerts.info message="Your profile is visible to other users." />

Real Example from Codebase#

{{-- Informing users about features --}}
<x-alerts.info message="You can customize your dashboard from the settings page." />

---

Default Alert#

Displays a neutral message with a gray color scheme. Use for general notifications that don't fit other categories.

Props#

Prop	Type	Default	Description
message	string	required	The message to display

Basic Usage#

<x-alerts.default message="No new notifications." />

---

Validation Errors Alert#

Displays a list of validation errors, typically used after form submission. Automatically reads errors from the $errors bag.

Basic Usage#

{{-- Displays all validation errors --}}
<x-alerts.errors />

With Custom Title#

<x-alerts.errors title="Please fix the following errors:" />

Real Example from Codebase#

{{-- In form views --}}
<form wire:submit="save">
    <x-alerts.errors />

    <x-inputs.input label="Name" name="name" wire:model="name" />
    <x-inputs.input label="Email" name="email" wire:model="email" />

    <x-buttons.button type="submit" variant="primary">Submit</x-buttons.button>
</form>

---

Messages Component#

The <x-messages> component is a convenience wrapper that automatically displays success, error, warning, and info messages from the session.

Basic Usage#

{{-- Automatically displays any session flash messages --}}
<x-messages />

What It Displays#

The component checks for these session keys:

• session('success') - Renders success alert
• session('error') - Renders error alert
• session('warning') - Renders warning alert
• session('info') - Renders info alert

Real Example from Codebase#

{{-- Used in breadcrumbs component --}}
<x-breadcrumbs :breadcrumbs="$breadcrumbs" />
{{-- Messages are shown automatically after breadcrumbs --}}

---

Toast Notifications#

For non-blocking notifications that appear in the corner of the screen, use the Toast Notifications component.

Setup#

Include the toast notifications component in your layout (typically already included in the backend layout):

<x-toast-notifications />

Props#

Prop	Type	Default	Description
soundEffect	boolean	false	Play sound on notification
displayDuration	integer	5000	Duration in milliseconds

Triggering Toast Notifications#

From JavaScript/Alpine.js#

// Success notification
window.dispatchEvent(new CustomEvent('notify', {
    detail: {
        variant: 'success',
        title: 'Success!',
        message: 'Your changes have been saved.'
    }
}));

// Error notification
window.dispatchEvent(new CustomEvent('notify', {
    detail: {
        variant: 'error',
        title: 'Error',
        message: 'Something went wrong.'
    }
}));

// Warning notification
window.dispatchEvent(new CustomEvent('notify', {
    detail: {
        variant: 'warning',
        title: 'Warning',
        message: 'Please review your input.'
    }
}));

// Info notification
window.dispatchEvent(new CustomEvent('notify', {
    detail: {
        variant: 'info',
        title: 'Info',
        message: 'New features are available.'
    }
}));

From Livewire#

// In your Livewire component
$this->dispatch('notify', [
    'variant' => 'success',
    'title' => 'Saved!',
    'message' => 'Your profile has been updated.'
]);

Available Variants#

Variant	Color	Use Case
success	Green	Successful operations
error / danger	Red	Errors and failures
warning	Yellow/Amber	Warnings and cautions
info	Blue	Information and tips

Real Example from Codebase#

// In Livewire component after saving
public function save()
{
    $this->validate();
    $this->user->save();

    $this->dispatch('notify', [
        'variant' => 'success',
        'title' => 'Profile Updated',
        'message' => 'Your profile has been saved successfully.'
    ]);
}

---

Styling and Customization#

Color Scheme Reference#

Alert Type	Background	Border	Text
Success	bg-green-500/10	border-green-500	text-green-500
Error	bg-red-500/10	border-red-500	text-red-500
Warning	bg-yellow-500/10	border-yellow-500	text-yellow-500
Info	bg-blue-500/10	border-blue-500	text-blue-500
Default	bg-gray-500/10	border-gray-500	text-gray-500

Dark Mode#

All alerts automatically adapt to dark mode using Tailwind's dark: variants. The text colors shift to ensure readability on dark backgrounds.

---

Best Practices#

1. Use appropriate alert types - Match the alert type to the severity of the message
2. Keep messages concise - Alert messages should be brief and actionable
3. Position consistently - Place alerts in predictable locations (usually top of content area)
4. Don't overuse - Too many alerts can overwhelm users
5. Use toast for non-critical - For non-blocking information, prefer toast notifications
6. Include actions when relevant - For errors, provide guidance on how to fix the issue

---

Next Steps#

• Buttons - Learn about button components
• Inputs - Explore form input components
• Toast Notifications - Advanced notification patterns