PHPackages arnoldwamae/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. arnoldwamae/livewire-alert ActiveLibrary[Utility & Helpers](/categories/utility) arnoldwamae/livewire-alert ========================== This package provides a simple alert utilities for your livewire components. borrowed from jantinnerezo/livewire-alert 1.0(1y ago)1252MITPHPPHP ^8.1|^8.2 Since Feb 25Pushed 1y ago1 watchersCompare [ Source](https://github.com/ArnoldNicole/livewire-alert)[ Packagist](https://packagist.org/packages/arnoldwamae/livewire-alert)[ Docs](https://github.com/jantinnerezo/livewire-alert)[ RSS](/packages/arnoldwamae-livewire-alert/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)Dependencies (4)Versions (2)Used By (0) Livewire Alert ============== [](#livewire-alert) [![Build Status](https://github.com/jantinnerezo/livewire-alert/workflows/PHPUnit/badge.svg)](https://github.com/jantinnerezo/livewire-alert/actions)[![Latest Stable Version](https://camo.githubusercontent.com/ced21d26a4ecc597d816d153900eb8bed7330f4a10e973b3fba3b31faaa7bcef/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6a616e74696e6e6572657a6f2f6c697665776972652d616c657274)](https://packagist.org/packages/jantinnerezo/livewire-alert)[![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 simple alert utility package designed to seamlessly integrate with your Livewire components. Under the hood, it utilizes SweetAlert2, offering you the functionality of SweetAlert2 without the need for any custom Javascript. Interactive Demo ---------------- [](#interactive-demo) Check the interactive demo here: Contribute to interactive demo ------------------------------ [](#contribute-to-interactive-demo) Do you have any ideas in mind that you can add to the interactive demo? Fork and submit a PR here: Installation ------------ [](#installation) You can install the package via composer: ``` composer require arnoldwamae/livewire-alert ``` Next, add the scripts component to your template after the `@livewireScripts`. > SweetAlert2 script is not included by default so make sure you include it before livewire alert script. ``` @livewireScripts ``` You can also manually include the script by publishing `livewire-alert.js` ``` php artisan vendor:publish --tag=livewire-alert:assets ``` And then in your view you can include the published script instead of including inline script with `` component. > If you go this path, make sure to include the `` right after the livewire-alert script if you still want the flash feature. ``` ``` Requirements ------------ [](#requirements) This package is meant to use with Livewire components. Make sure you are using it with Livewire projects only. - PHP 7.2 or higher - Laravel 7, 8, 9 and 10 - Livewire - SweetAlert2 Usage ----- [](#usage) You can use livewire alert by using the `LivewireAlert` trait. ``` use Jantinnerezo\LivewireAlert\LivewireAlert; class Index extends Component { use LivewireAlert; public function submit() { $this->alert('success', 'Basic Alert'); } } ``` Displaying different alert icons. > The default alert behaviour is a toast notification. ``` $this->alert('success', 'Success is approaching!'); ``` ``` $this->alert('warning', 'The world has warned you.'); ``` ``` $this->alert('info', 'The fact is you know your name :D'); ``` ``` $this->alert('question', 'How are you today?'); ``` Disabling toast notification alert treatment. ``` $this->alert('info', 'This is not as toast alert', [ 'toast' => false ]); ``` Positioning Alert ----------------- [](#positioning-alert) ``` $this->alert('info', 'Centering alert', [ 'position' => 'center' ]); ``` List of the following alert positions: - top - top-start - top-end - center - center-start - center-end - bottom - bottom-start - bottom-end Buttons ------- [](#buttons) SweetAlert2 has 3 buttons that is not shown by default. To show confirm button, simply pass the `showConfirmButton` to alert configuration and set it to `true`. ``` $this->alert('question', 'How are you today?', [ 'showConfirmButton' => true ]); ``` Change confirm button text: ``` $this->alert('question', 'How are you today?', [ 'showConfirmButton' => true, 'confirmButtonText' => 'Good' ]); ``` Adding event when confirm button is clicked. First create a function that will be fired when confirm button is clicked: ``` public function confirmed() { // Do something } ``` Add to it event listeners array to register it. ``` protected $listeners = [ 'confirmed' ]; ``` Or ``` public function getListeners() { return [ 'confirmed' ]; } ``` And then pass it to `onConfirmed` key of the alert configuration. ``` $this->alert('question', 'How are you today?', [ 'showConfirmButton' => true, 'confirmButtonText' => 'Good', 'onConfirmed' => 'confirmed' ]); ``` You can also pass a parameter to the event to get the alert response. > Useful when you need to get the value of the input inside the alert. ``` $this->alert('warning', 'Please enter password', [ 'showConfirmButton' => true, 'confirmButtonText' => 'Submit', 'onConfirmed' => 'confirmed', 'input' => 'password', 'inputValidator' => '(value) => new Promise((resolve) => '. ' resolve('. ' /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&]).{8,}$/.test(value) ?'. ' undefined : "Error in password"'. ' )'. ')', 'allowOutsideClick' => false, 'timer' => null ]); ``` ``` public function confirmed($data) { // Get input value and do anything you want to it $password = $data['value']; } ``` Just do the same thing to show `deny` and `cancel` button. Just create a function for each button and register it to event listeners. ``` public function denied() { // Do something when denied button is clicked } ``` ``` public function cancelled() { // Do something when cancel button is clicked } ``` ``` public function getListeners() { return [ 'denied', 'dismissed' ]; } ``` Make sure to set `showDenyButton` and `showCancelButton` to `true`. ``` $this->alert('warning', 'Alert with deny and cancel button', [ 'showDenyButton' => true, 'denyButtonText' => 'Deny', 'showCancelButton' => true, 'cancelButtonText' => 'Cancel', 'onDenied' => 'denied', 'onDismissed' => 'cancelled' ]); ``` Emit events to only specific component. Instead of passing the listener directly to the event, pass an array with `component` and `listeners` keys. ``` 'onConfirmed' => [ 'component' => 'livewire-component', 'listener' => 'confirmed' ]; ``` Don't want to define extra button configuration every time you show alert confirmation? Use the confirm method instead. > You can always override default confirm settings just tweak the configuration. ``` $this->confirm('Are you sure do want to leave?', [ 'onConfirmed' => 'confirmed', ]); ``` Flash Notification ------------------ [](#flash-notification) You can also use alert as a flash notification. You can pass the redirect route on the fourth parameter, redirects to `/` by default. ``` $this->flash('success', 'Successfully submitted form', [], '/'); ``` Configuration ------------- [](#configuration) Override default alert config by publishing the `livewire-alert.php` config file. ``` php artisan vendor:publish --tag=livewire-alert:config ``` ``` [ 'alert' => [ 'position' => 'top-end', 'timer' => 3000, 'toast' => true, 'text' => null, 'showCancelButton' => false, 'showConfirmButton' => false ], 'confirm' => [ 'icon' => 'warning', 'position' => 'center', 'toast' => false, 'timer' => null, 'showConfirmButton' => true, 'showCancelButton' => true, 'cancelButtonText' => 'No', 'confirmButtonColor' => '#3085d6', 'cancelButtonColor' => '#d33' ] ] ``` Customizations -------------- [](#customizations) You can customize alert style by passing your custom classes, works perfectly with [TailwindCSS](https://tailwindcss.com/) ``` [ 'customClass' => [ 'container' => '', 'popup' => '', 'header' => '', 'title' => '', 'closeButton' => '', 'icon' => '', 'image' => '', 'content' => '', 'htmlContainer' => '', 'input' => '', 'inputLabel' => '', 'validationMessage' => '', 'actions' => '', 'confirmButton' => '', 'denyButton' => '', 'cancelButton' => '', 'loader' => '', 'footer' => '' ] ]; ``` For more details about customization and configuration please check [SweetAlert2](https://sweetalert2.github.io/#configuration/) Contributors ------------ [](#contributors) [ ![](https://camo.githubusercontent.com/e978d61fe2810c4f6100376ec7cf5078fa530545434ae3ad928340c62dd2fb17/68747470733a2f2f636f6e747269622e726f636b732f696d6167653f7265706f3d6a616e74696e6e6572657a6f2f6c697665776972652d616c657274)](https://github.com/jantinnerezo/livewire-alert/graphs/contributors)Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently. 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 31 — LowBetter than 68% of packages Maintenance44 Moderate activity, may be stable Popularity14 Limited adoption so far Community7 Small or concentrated contributor base Maturity50 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 Unknown Total 1 Last Release 439d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/261d35ba3ce704af483f21a6110d78b4a1947ea0989951c621686a196c189f87?d=identicon)[ArnoldNicole](/maintainers/ArnoldNicole) --- Top Contributors [![ArnoldNicole](https://avatars.githubusercontent.com/u/45710585?v=4)](https://github.com/ArnoldNicole "ArnoldNicole (3 commits)") --- Tags laravellivewirealertjantinnerezolivewire-alert ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/arnoldwamae-livewire-alert/health.svg) ``` [![Health](https://phpackages.com/badges/arnoldwamae-livewire-alert/health.svg)](https://phpackages.com/packages/arnoldwamae-livewire-alert) ``` ### Alternatives [livewire/flux The official UI component library for Livewire. 9385.0M85](/packages/livewire-flux)[jantinnerezo/livewire-alert This package provides a simple alert utilities for your livewire components. 8041.2M20](/packages/jantinnerezo-livewire-alert)[masmerise/livewire-toaster Beautiful toast notifications for Laravel / Livewire. 505550.3k6](/packages/masmerise-livewire-toaster)[mediconesystems/livewire-datatables Advanced datatables using Laravel, Livewire, Tailwind CSS and Alpine JS 1.2k711.3k8](/packages/mediconesystems-livewire-datatables)[livewire/volt An elegantly crafted functional API for Laravel Livewire. 4195.3M84](/packages/livewire-volt)[spatie/laravel-livewire-wizard Build wizards using Livewire 4061.0M4](/packages/spatie-laravel-livewire-wizard) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)