Alerts Components

Jump to:

Reusable Livewire Alerts with Dismiss and AutoHide Support

Reusable Livewire Alerts with Dismiss and AutoHide Support

UI Stack: Tailwind CSS, Alpine JS, Livewire

Alerts
Dismissible Alerts
Auto Hide Alerts

Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted

Overview

This component enables the creation of various types of alerts (success, error, info, and warning) in your Laravel application. The alerts can be configured with custom messages and can be set to auto-hide after a certain duration or remain visible until dismissed by the user.

Installation

Follow the steps below to implement the Livewire Alert component:

  • Copy the LivewireAlerts.php file to your app/Livewire/Traits directory.
  • Copy the livewire-alerts.blade.php file to your resources/views/livewire/traits directory.

Integration

After placing the files in the correct directories, you can use the LivewireAlerts trait in any Livewire component by including it at the top of the component class. For example:


use App\Livewire\Traits\LivewireAlerts;

class YourComponent extends Component
{
    use LivewireAlerts;

    // Your component code here...
}

Usage

With the trait integrated into your component, you can now use the alert functions in your component’s methods. For example:


public function saveData()
{
    // Your data saving logic...

    $this->successAlert('Data saved successfully!');
}

Increase the autoHide parameter to make the alert disappear automatically after a certain number of milliseconds. If dismissible is set to true, a close button will appear in the alert box. For example:


$this->successAlert('Data saved successfully!', 3000, true);

Customization

The alert types (success, error, info, warning) are defined in the LivewireAlerts trait. If you need to customize the look and feel of the alerts, you can do so in the livewire-alerts.blade.php file. Remember to always test your changes thoroughly to ensure they work as expected.

Status Banners

Success, warning, and danger banners that dismiss in place.

Profile saved

Your changes are live for everyone on this workspace.

Card expires soon

Update billing before the next invoice on the 1st.

Webhook missed

Lemon Squeezy could not reach the endpoint. Retry from the order.

Code
Please login to View/Download the Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted

Inline status that stays on the page until dismissed. Session flash alerts remain the right tool for one redirect.

Components on this page

2 components