WireUI
Dialogs

The WireUI dialog API is designed to show alerts and dialog confirmation. Dialogs use livewire events to work. You can customize a dialog however you like.

Example case use:

  • Alert succeced action
  • Confirm an action
First Steps

Now add the component to layout

1<html>
2 <body>
3 <x-dialog />
4 or
5 <x-dialog z-index="z-50" blur="md" align="center" />
6 ...
7 </body>
8</html>

Tip: The dialog has all modal options. You can define globals or individuals
JavaScript Dialog

Dialogs can be created directly via JavaScript

1window.$wireui.dialog({
2 title: 'Profile saved!',
3 description: 'Your profile was successfull saved',
4 icon: 'success'
5})
Livewire Dialog

Dialogs can be created directly from Livewire Component

1<?php
2 
3namespace App\Http\Livewire;
4 
5use Livewire\Component;
6use WireUi\Traits\Actions;
7 
8class MyComponent extends Component
9{
10 use Actions;
11 
12 ...
13 
14 public function save(): void
15 {
16 ...
17 // use a simple syntax: success | error | warning | info
18 $this->dialog()->success(
19 $title = 'Profile saved',
20 $description = 'Your profile was successfull saved'
21 );
22 $this->dialog()->error(
23 $title = 'Error !!!',
24 $description = 'Your profile was not saved'
25 );
26 
27 // or use a full syntax
28 $this->dialog([
29 'title' => 'Profile saved!',
30 'description' => 'Your profile was successfull saved',
31 'icon' => 'success'
32 ]);
33 $this->dialog()->show([
34 'title' => 'Profile saved!',
35 'description' => 'Your profile was successfull saved',
36 'icon' => 'success'
37 ]);
38 }
39}
Alert Dialog

Sometimes you may want to inform the user that an action has been successful, or it cannot be completed, even a simple warning, the dialog API allows for this easily. See the example below.

The options needed to create such a notification are:

1{
2 title: 'Notification Title',
3 description: 'It can be nullable too',
4 icon: 'success'
5}
Confirm Dialog

You may also want to ask the user for a confirmation of a certain action, the dialog API has a special way for that. See the example below.

You can create a confirmation notification through the Livewire Component

1<?php
2 
3namespace App\Http\Livewire;
4 
5use Livewire\Component;
6use WireUi\Traits\Actions;
7 
8class MyComponent extends Component
9{
10 use Actions;
11 
12 ...
13 
14 public function save(): void
15 {
16 // use a simple syntax
17 $this->dialog()->confirm([
18 'title' => 'Are you Sure?',
19 'description' => 'Save the information?',
20 'acceptLabel' => 'Yes, save it',
21 'method' => 'save',
22 'params' => 'Saved',
23 ]);
24 
25 // use a full syntax
26 $this->dialog()->confirm([
27 'title' => 'Are you Sure?',
28 'description' => 'Save the information?',
29 'icon' => 'question',
30 'accept' => [
31 'label' => 'Yes, save it',
32 'method' => 'save',
33 'params' => 'Saved',
34 ],
35 'reject' => [
36 'label' => 'No, cancel',
37 'method' => 'cancel',
38 ],
39 ]);
40 }
41}

You can create a confirmation notification via javascript

1window.$wireui.confirmDialog({
2 title: 'Are you Sure?',
3 description: 'Save the information?',
4 icon: 'question',
5 accept: {
6 label: 'Yes, save it',
7 method: 'save',
8 params: 'Saved'
9 },
10 reject: {
11 label: 'No, cancel',
12 method: 'cancel'
13 }
14}, livewireComponentId)
Confirm Directive

Alternatively, you can use a html directive to create a confirmation dialog
Blade components do not support @bladeDirectives

You use it in alpinejs component

1<div x-data="{ title: 'Sure Delete?' }">
2 <x-button label="Delete"
3 x-on:confirm="{
4 title,
5 icon: 'warning',
6 method: 'delete',
7 params: 1
8 }"
9 />
10</div>

And use it in pure html

1<x-button label="Delete"
2 x-on:confirm="{
3 title: 'Sure Delete?',
4 icon: 'warning',
5 method: 'delete',
6 params: 1
7 }"
8/>
Dialog Events

Dialog can have 3 events, onClose, onDismiss and onTimeout. Each event will be triggered when they happen.

Events:

  • The onClose event will be called whenever the dialog has been removed, that is, when the time is up, when the user closes and when an action is clicked
  • The onDismiss event will be triggered whenever the user removes the dialog
  • The onTimeout event will fire every time the dialog runs out.

You can create events via javascript using closure

1{
2 onClose: () => alert('onClose is fired'),
3 onDismiss: () => alert('onDismiss is fired'),
4 onTimeout: () => alert('onTimeout is fired'),
5}

Or use the events to call actions on the Livewire Component, in which case the component ID is required

1window.\$wireui.dialog({
2 ...
3 onClose: {
4 method: 'firedEvent',
5 params: 'onClose'
6 },
7 onDismiss: {
8 method: 'firedEvent',
9 params: { event: 'onDismiss'}
10 },
11 onTimeout: {
12 method: 'firedEvent',
13 params: ['onTimeout', 'more value']
14 },
15}, livewireComponentId)

Events can also be used for notifications created by the Livewire Component

1<?php
2 
3namespace App\Http\Livewire;
4 
5use Livewire\Component;
6use WireUi\Traits\Actions;
7 
8class MyComponent extends Component
9{
10 use Actions;
11 
12 ...
13 
14 public function save(): void
15 {
16 ...
17 $this->dialog([
18 ...
19 
20 'onClose' => [
21 'method' => 'firedEvent',
22 'params' => 'onClose',
23 ],
24 'onDismiss' => [
25 'method' => 'firedEvent',
26 'params' => ['event' => 'onDismiss'],
27 ],
28 'onTimeout' => [
29 'method' => 'firedEvent',
30 'params' => ['onTimeout', 'more value'],
31 ],
32 ]);
33 }
34}
Custom Dialog

You can create dialogs with custom title, description or any code in slot

1<x-dialog id="custom" title="User information" description="Complete your profile, give your name">
2 <x-input label="What's your name?" placeholder="your name bro" x-model="name" />
3</x-dialog>
Dialog Options

Options

Prop Required Default Type Available
id false none string --
title false none string --
description false none string --
icon false none string icon | all heroicons
iconColor false none string tailwind text colors
iconBackground false none string tailwind bg colors
timeout false none number --
style false center string center|inline
close false none string | Button --
closeButton false true boolean --
progressbar false true boolean --
Button
1Button {
2 label: string
3 color?: Color
4 size?: Size
5 rounded?: boolean
6 squared?: boolean
7 bordered?: boolean
8 flat?: boolean
9 icon?: string
10 rightIcon?: string
11}
Action options
1Color = 'primary' | 'secondary' | 'positive' | 'negative' |
2 'warning' | 'info' | 'dark'
3ActionOptions extends Button {
4 label?: string
5 method?: string
6 params?: any
7 url?: string
8 execute?: CallableFunction
9}
Icons
success | error | info | warning | question
Events
1onClose | onDismiss | onTimeout
2
3EventOptions {
4 method?: string
5 params?: any
6 url?: string
7}
🪁 Playground