PHPackages                             jantinnerezo/livewire-alert - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. jantinnerezo/livewire-alert

ActiveLibrary[Utility & Helpers](/categories/utility)

jantinnerezo/livewire-alert
===========================

This package provides a simple alert utilities for your livewire components.

v4.0.9(1mo ago)8041.2M—3.4%92[1 issues](https://github.com/jantinnerezo/livewire-alert/issues)[1 PRs](https://github.com/jantinnerezo/livewire-alert/pulls)20MITPHPPHP ^8.1CI passing

Since Jun 14Pushed 1mo ago12 watchersCompare

[ Source](https://github.com/jantinnerezo/livewire-alert)[ Packagist](https://packagist.org/packages/jantinnerezo/livewire-alert)[ Docs](https://github.com/jantinnerezo/livewire-alert)[ RSS](/packages/jantinnerezo-livewire-alert/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (12)Versions (55)Used By (20)

Livewire Alert
==============

[](#livewire-alert)

[![Build Status](https://github.com/jantinnerezo/livewire-alert/workflows/PHPUnit/badge.svg)](https://github.com/jantinnerezo/livewire-alert/actions) [![PHPStan Analysis](https://github.com/jantinnerezo/livewire-alert/workflows/PHPStan/badge.svg)](https://github.com/jantinnerezo/livewire-alert/actions) [![Total Downloads](https://camo.githubusercontent.com/db9ef6c8c93844db073b8b94fb0dd6f0cf73abe69536b4ef85bcefdcc363bdac/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6a616e74696e6e6572657a6f2f6c697665776972652d616c657274)](https://packagist.org/packages/jantinnerezo/livewire-alert) [![License](https://camo.githubusercontent.com/e5fa98ea0d699972ee30dabd1200cb6400afdd0844fd752d2bf2464993531574/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6a616e74696e6e6572657a6f2f6c697665776972652d616c657274)](https://packagist.org/packages/jantinnerezo/livewire-alert)

Livewire Alert is a Laravel Livewire package designed to integrate SweetAlert2 notifications seamlessly into Livewire projects. This package simplifies the process of displaying simple, customizable alerts to users, enhancing the interactivity and user experience of your Livewire projects.

You can check the interactive demo here:

Requirements
------------

[](#requirements)

- PHP 8.1 or higher
- Laravel 10.x or higher
- Livewire 3.x
- Composer

Installation
------------

[](#installation)

First, require the package with Composer:

```
composer require jantinnerezo/livewire-alert
```

Optionally, if you want to customize the global configuration, you can publish the config file:

```
php artisan vendor:publish --tag=livewire-alert:config
```

Next, install SweetAlert2 via npm or yan:

NPM

```
npm install sweetalert2
```

Yarn

```
yarn add sweetalert2
```

After installing SweetAlert2, import it into your `resources/js/app.js` file

```
import Swal from 'sweetalert2'

window.Swal = Swal
```

If you prefer not to use package manager installation, you can include SweetAlert2 directly via CDN. Add the following script to your Blade layout file `(e.g., resources/views/layouts/app.blade.php)` before the closing `` tag:

```

```

Filament
--------

[](#filament)

Integrate Livewire Alert in your Filament project, simply register the JavaScript asset in the boot method of your `AppServiceProvider` to import SweetAlert2.

```
use Filament\Support\Facades\FilamentAsset;
use Illuminate\Support\Facades\Vite;
use Filament\Support\Assets\Js;

public function boot()
{
    FilamentAsset::register([
        // Local asset build using Vite
        Js::make('sweetalert2', Vite::asset('resources/js/sweetalert2.js')),

        // Or via CDN
        Js::make('sweetalert2', 'https://cdn.jsdelivr.net/npm/sweetalert2@11'),
    ]);
}
```

Usage
-----

[](#usage)

This package provides a convenient Facade that allows you to trigger customizable SweetAlert2-based alerts in your Laravel Livewire application. The Facade uses a fluent interface, enabling you to chain methods to configure your alert before displaying it.

### Basic Usage

[](#basic-usage)

```
use Jantinnerezo\LivewireAlert\Facades\LivewireAlert;

public function save()
{
    LivewireAlert::title('Changes saved!')
        ->success()
        ->show();
}
```

### Adding text

[](#adding-text)

```
LivewireAlert::title('Item Saved')
    ->text('The item has been successfully saved to the database.')
    ->success()
    ->show();
```

### Available alert icons

[](#available-alert-icons)

```
LivewireAlert::title('Success')->success();
```

```
LivewireAlert::title('Error')->error();
```

```
LivewireAlert::title('Warning')->warning();
```

```
LivewireAlert::title('Info')->info();
```

```
LivewireAlert::title('Question')->question();
```

### Position

[](#position)

The `position()` method allows you to specify where the alert appears on the screen. You can use either the Position enum for type safety or a plain string for flexibility.

#### Using the Position Enum

[](#using-the-position-enum)

Leverage the Position enum for predefined, type-safe options:

```
use Jantinnerezo\LivewireAlert\Enums\Position;

LivewireAlert::title('Question')
    ->position(Position::Center)
    ->question()
    ->show();
```

#### Using a String Value

[](#using-a-string-value)

Alternatively, you can pass a string directly, but it must exactly match one of the `Position` enum values, See: [Position](https://github.com/jantinnerezo/livewire-alert/blob/v4/src/Enums/Position.php) enum.

```
LivewireAlert::title('Question')
    ->position('center')
    ->question()
    ->show();
```

### Toast Notification

[](#toast-notification)

Create a toast-style alert with the `toast()` method:

```
LivewireAlert::title('Welcome!')
    ->text('You have logged in successfully.')
    ->info()
    ->toast()
    ->position('top-end')
    ->show();
```

### Timer

[](#timer)

The `timer()` method sets an auto-dismiss timer for the alert, specifying how long (in milliseconds) the alert remains visible before closing automatically.

#### Usage

[](#usage-1)

Pass an integer representing the duration in milliseconds:

```
LivewireAlert::title('Success')
    ->text('Operation completed successfully.')
    ->success()
    ->timer(3000) // Dismisses after 3 seconds
    ->show();
```

### Buttons

[](#buttons)

The LivewireAlert package provides methods to add and customize buttons in your alerts: `withConfirmButton()`, `withCancelButton()`, and `withDenyButton()`. Each button can trigger specific events, handled via `onConfirm()`, `onDeny()`, or `onDismiss()`, allowing you to execute custom logic in your Livewire component.

#### Confirm

[](#confirm)

```
LivewireAlert::title('Save?')
    ->withConfirmButton('Yes, Save')
    ->show();
```

#### Cancel

[](#cancel)

```
LivewireAlert::title('Hey cancel')
    ->withCancelButton('Cancel')
    ->show();
```

#### Deny

[](#deny)

```
LivewireAlert::title('Are you do you want to do it?')
    ->withDenyButton('No')
    ->show();
```

### Button text

[](#button-text)

Alternatively, you can use `confirmButtonText()`, `cancelButtonText()`, and `denyButtonText()` to set the text after enabling the buttons with `withConfirmButton()`, `withCancelButton()`, or `withDenyButton()` without text:

```
LivewireAlert::title('Save?')
    ->withConfirmButton() // Enables button with default text
    ->confirmButtonText('Yes')
    ->withDenyButton()    // Enables button with default text
    ->denyButtonText('No')
    ->withCancelButton()  // Enables button with default text
    ->cancelButtonText('Cancel')
    ->show();
```

### Button Color

[](#button-color)

You can customize the appearance of buttons by setting their colors using the `confirmButtonColor()`, `cancelButtonColor()`, and `denyButtonColor()` methods. These methods accept a color value (e.g., color names, hex codes, or CSS-compatible strings) to style the respective buttons.

```
LivewireAlert::title('Save?')
    ->confirmButtonColor('green')
    ->withDenyButton('red')
    ->withCancelButton('blue')
    ->show();
```

### Button Events

[](#button-events)

Each button can trigger a corresponding event when clicked, allowing you to handle user interactions in your Livewire component.

#### `onConfirm()`

[](#onconfirm)

```
LivewireAlert::title('Save?')
    ->withConfirmButton('Save')
    ->onConfirm('saveData', ['id' => $this->itemId])
    ->show();

public function saveData($data)
{
    $itemId = $data['id'];
    // Save logic
}
```

#### `onDismiss()`

[](#ondismiss)

```
LivewireAlert::title('Delete?')
    ->withConfirmButton('Delete')
    ->withCancelButton('Keep')
    ->onDismiss('cancelDelete', ['id' => $this->itemId])
    ->show();

public function cancelDelete($data)
{
    $itemId = $data['id'];
    // Cancel logic
}
```

#### `onDeny()`

[](#ondeny)

```
LivewireAlert::title('Update?')
    ->withConfirmButton('Update')
    ->withDenyButton('Discard')
    ->onDeny('discardChanges', ['id' => $this->itemId])
    ->show();

public function discardChanges($data)
{
    $itemId = $data['id'];
    // Discard logic
}
```

#### Using them together example

[](#using-them-together-example)

```
LivewireAlert::title('Process File')
    ->text('What would you like to do?')
    ->question()
    ->withConfirmButton('Save')
    ->withCancelButton('Cancel')
    ->withDenyButton('Delete')
    ->onConfirm('saveFile', ['id' => $this->fileId])
    ->onDeny('deleteFile', ['id' => $this->fileId])
    ->onDismiss('cancelAction', ['id' => $this->fileId])
    ->show();
```

### Confirm Dialog

[](#confirm-dialog)

The `asConfirm()` method configures the alert as a confirmation dialog with a predefined options. It automatically applies a question icon, adds confirm and deny buttons with default text from the configuration, and disables the auto-dismiss timer, making it ideal for scenarios requiring explicit user input.

```
LivewireAlert::title('Are you sure?')
    ->text('Do you want to proceed with this action?')
    ->asConfirm()
    ->show();
```

#### Handling Events

[](#handling-events)

Combine with `onConfirm()` and `onDeny()` to handle user responses:

```
LivewireAlert::title('Delete Item')
    ->text('Are you sure you want to delete this item?')
    ->asConfirm()
    ->onConfirm('deleteItem', ['id' => $this->itemId])
    ->onDeny('keepItem', ['id' => $this->itemId])
    ->show();

public function deleteItem($data)
{
    $itemId = $data['id'];
    // Delete logic
}

public function keepItem($data)
{
    $itemId = $data['id'];
    // Keep logic
}
```

### Inputs

[](#inputs)

The LivewireAlert package allows you to add input fields to alerts using the `withOptions()` method, leveraging SweetAlert2’s input capabilities. This is useful for collecting user input (e.g., text, selections) directly within the alert, with the input value returned via event handlers like `onConfirm()`.

#### Usage

[](#usage-2)

Use `withOptions()` to pass an array containing SweetAlert2 input options. Common input types include `text`, `email`, `password`, `number`, `textarea`, `select`, `radio`, `checkbox`, and `file`.

Add a simple text input:

```
LivewireAlert::title('Enter Your Name')
    ->withOptions([
        'input' => 'text',
        'inputPlaceholder' => 'Your name here',
    ])
    ->withConfirmButton('Submit')
    ->onConfirm('saveName')
    ->show();

public function saveName($data)
{
    $name = $data['value']; // User’s input from the text field
    // Save the name
}
```

Select Input Example

```
LivewireAlert::title('Choose an Option')
    ->withOptions([
        'input' => 'select',
        'inputOptions' => [
            'small' => 'Small',
            'medium' => 'Medium',
            'large' => 'Large',
        ],
        'inputPlaceholder' => 'Select a size',
    ])
    ->withConfirmButton('Confirm')
    ->onConfirm('processSelection')
    ->show();

public function processSelection($data)
{
    $size = $data['value']; // Selected value (e.g., 'small')
    // Process the selection
}
```

#### Handling Input Values

[](#handling-input-values)

When an input is present, the `$data` parameter in event methods (e.g., `onConfirm()`, `onDeny()`) includes a value property containing the user’s input. This value depends on the input type:

- Text, email, password, number, textarea: The entered string or number.
- Select, radio: The selected option’s key.
- Checkbox: true or false.
- File: The file data (if applicable).

### Flash Alert

[](#flash-alert)

Need to flash alerts across requests? In this package you can leverage Laravel’s session flashing alerts and display them in your Livewire components. This feature, inspired by version 3’s simplicity, gives you full freedom to define your own session keys and structure, allowing tailored flash alerts that appear automatically `(e.g., on mount())` after actions like redirects.

```
public function mount()
{
    if (session()->has('saved')) {
        LivewireAlert::title(session('saved.title'))
            ->text(session('saved.text'))
            ->success()
            ->show();
    }
}

public function changesSaved()
{
    session()->flash('saved', [
        'title' => 'Changes Saved!',
        'text' => 'You can safely close the tab!',
    ]);

    $this->redirect('/dashboard');
}
```

### Image

[](#image)

You can use `imageUrl()`, `imageWidth()`, `imageHeight()`, and `imageAlt()` methods to define custom image into your alert.

```
LivewireAlert::imageUrl('/images/example.png');
```

```
LivewireAlert::imageWidth(200);
```

```
LivewireAlert::imageHeight(200);
```

```
LivewireAlert::imageAlt('Simple Alt');
```

### Options

[](#options)

The `withOptions()` method allows you to extend the alert’s configuration with any SweetAlert2-compatible options, giving you full control to customize its appearance, behavior, or functionality beyond the built-in methods. This is ideal for advanced use cases like adding inputs, modifying styles, or setting custom SweetAlert2 features.

```
LivewireAlert::title('Custom Alert')
    ->text('This alert has a unique style.')
    ->success()
    ->withOptions([
        'width' => '400px',
        'background' => '#f0f0f0',
        'customClass' => ['popup' => 'animate__animated animate__bounceIn'],
        'allowOutsideClick' => false,
    ])
    ->show();
```

For a comprehensive guide to customization and available configuration options, please refer to the [SweetAlert2](https://sweetalert2.github.io/#configuration) documentation.

### Dependency Injection

[](#dependency-injection)

Who said you can only use the Facade? With this package, you can also inject the `Jantinnerezo\LivewireAlert\LivewireAlert` class directly into your Livewire component methods via dependency injection. This approach lets you access the alert functionality within the context of your component, offering a clean alternative to the Facade syntax.

```
use Jantinnerezo\LivewireAlert\LivewireAlert;

public function save(LivewireAlert $alert)
{
    $alert->title('Success!')
        ->text('What would you like to do?')
        ->question()
        ->withConfirmButton('Save')
        ->withCancelButton('Cancel')
        ->withDenyButton('Delete')
        ->onConfirm('saveFile', ['id' => $this->fileId])
        ->onDeny('deleteFile', ['id' => $this->fileId])
        ->onDismiss('cancelAction', ['id' => $this->fileId])
        ->show();
}
```

All methods remain available, and you can chain them fluently just like with the Facade!

### Looking for v3?

[](#looking-for-v3)

If you’re seeking documentation for livewire-alert v3, note that the last release of the version 3 series was v3.0.3, available on GitHub at [v3.0.3](https://github.com/jantinnerezo/livewire-alert/releases/tag/v3.0.3) Released on March 11, 2024, this version supports Livewire 3 and latest Laravel 12 and includes features like basic alert functionality with the `LivewireAlert` trait.

This release, however, is a major refactor of the package, introducing a new architecture and enhanced features (like the fluent Facade interface and dependency injection). As a result, the documentation below focuses on v4.

For v3-specific usage:

```
composer require jantinnerezo/livewire-alert:^3.0
```

For ongoing projects, I recommend upgrading to v4.0 to take advantage of the improved API and feature set detailed in this documentation.

Testing
-------

[](#testing)

```
composer test
```

Contributors
------------

[](#contributors)

[ ![](https://camo.githubusercontent.com/e978d61fe2810c4f6100376ec7cf5078fa530545434ae3ad928340c62dd2fb17/68747470733a2f2f636f6e747269622e726f636b732f696d6167653f7265706f3d6a616e74696e6e6572657a6f2f6c697665776972652d616c657274)](https://github.com/jantinnerezo/livewire-alert/graphs/contributors)Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

Security
--------

[](#security)

If you discover any security related issues, please email  instead of using the issue tracker.

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

70

—

ExcellentBetter than 100% of packages

Maintenance89

Actively maintained with recent releases

Popularity63

Solid adoption and visibility

Community39

Small or concentrated contributor base

Maturity77

Established project with proven stability

 Bus Factor1

Top contributor holds 76.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~55 days

Recently: every ~84 days

Total

39

Last Release

55d ago

Major Versions

1.2.0 → 2.02020-11-02

2.2.7 → v3.02023-07-21

v3.0.2 → 4.0.x-dev2024-04-07

v3.0.3 → v4.x-dev2025-03-04

PHP version history (6 changes)v1.0PHP ^7.1

2.1PHP ^7.1|^7.2|^7.3|^7.4|^8.0

2.1.9PHP ^7.4|^8.0

2.2.7PHP ^7.4|^8.0|^8.1|^8.2

v3.0.1PHP ^8.1|^8.2

v4.x-devPHP ^8.1

### Community

Maintainers

![](https://www.gravatar.com/avatar/5c4866fb74e50074b2e4945de0c47b3836396ada466b80caac4e7452e60cbc6e?d=identicon)[jantinnerezo](/maintainers/jantinnerezo)

---

Top Contributors

[![jantinnerezo](https://avatars.githubusercontent.com/u/29738837?v=4)](https://github.com/jantinnerezo "jantinnerezo (103 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (10 commits)")[![gpibarra](https://avatars.githubusercontent.com/u/21188012?v=4)](https://github.com/gpibarra "gpibarra (3 commits)")[![laravel-shift](https://avatars.githubusercontent.com/u/15991828?v=4)](https://github.com/laravel-shift "laravel-shift (2 commits)")[![sarokse](https://avatars.githubusercontent.com/u/109381?v=4)](https://github.com/sarokse "sarokse (2 commits)")[![moneya](https://avatars.githubusercontent.com/u/7353773?v=4)](https://github.com/moneya "moneya (2 commits)")[![vlados](https://avatars.githubusercontent.com/u/46914?v=4)](https://github.com/vlados "vlados (2 commits)")[![nam-co](https://avatars.githubusercontent.com/u/3951529?v=4)](https://github.com/nam-co "nam-co (1 commits)")[![yardsoul](https://avatars.githubusercontent.com/u/9072978?v=4)](https://github.com/yardsoul "yardsoul (1 commits)")[![cjaoude](https://avatars.githubusercontent.com/u/4311607?v=4)](https://github.com/cjaoude "cjaoude (1 commits)")[![yoeunes](https://avatars.githubusercontent.com/u/10859693?v=4)](https://github.com/yoeunes "yoeunes (1 commits)")[![dylanmichaelryan](https://avatars.githubusercontent.com/u/46534379?v=4)](https://github.com/dylanmichaelryan "dylanmichaelryan (1 commits)")[![falconeri](https://avatars.githubusercontent.com/u/9047407?v=4)](https://github.com/falconeri "falconeri (1 commits)")[![jigar-dhulla](https://avatars.githubusercontent.com/u/3132291?v=4)](https://github.com/jigar-dhulla "jigar-dhulla (1 commits)")[![juanjoballesteros](https://avatars.githubusercontent.com/u/62188143?v=4)](https://github.com/juanjoballesteros "juanjoballesteros (1 commits)")[![mohamedsabil83](https://avatars.githubusercontent.com/u/10126040?v=4)](https://github.com/mohamedsabil83 "mohamedsabil83 (1 commits)")[![mundiakaluson](https://avatars.githubusercontent.com/u/50300486?v=4)](https://github.com/mundiakaluson "mundiakaluson (1 commits)")

---

Tags

alpinejslaravellivewiresweetalert2jantinnerezolivewire-alert

###  Code Quality

TestsPHPUnit

Static AnalysisPHPStan

Code StylePHP CS Fixer

Type Coverage Yes

### Embed Badge

![Health badge](/badges/jantinnerezo-livewire-alert/health.svg)

```
[![Health](https://phpackages.com/badges/jantinnerezo-livewire-alert/health.svg)](https://phpackages.com/packages/jantinnerezo-livewire-alert)
```

###  Alternatives

[livewire/flux

The official UI component library for Livewire.

9475.0M86](/packages/livewire-flux)[spatie/laravel-livewire-wizard

Build wizards using Livewire

4061.0M4](/packages/spatie-laravel-livewire-wizard)[kirschbaum-development/commentions

A package to allow you to create comments, tag users and more

12369.2k](/packages/kirschbaum-development-commentions)[revolution/self-ordering

Self Ordering System

2112.7k](/packages/revolution-self-ordering)[joelwmale/livewire-quill

Easily add QuillJS with image support to any Laravel Livewire component.

1314.0k](/packages/joelwmale-livewire-quill)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

116.6k](/packages/tomshaw-electricgrid)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)