WireUI
WireUI
Dialogs

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

Example use case:

  • Alert succeced action
  • Confirm an action
First Steps

Now add the component to the 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 successfully 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 successfully 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 successfully saved',
31            'icon'        => 'success'
32        ]);
33        $this->dialog()->show([
34            'title'       => 'Profile saved!',
35            'description' => 'Your profile was successfully 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, or 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{
3    title: 'Notification Title',
4    description: 'It can be nullable too',
5    icon: 'success'
6}
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 a Alpine.js 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>

Or 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 a closure 

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

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

 1 
 2window.\$wireui.dialog({
 3    ...
 4    onClose: {
 5        method: 'firedEvent',
 6        params: 'onClose'
 7    },
 8    onDismiss: {
 9        method: 'firedEvent',
10        params: { event: 'onDismiss'}
11    },
12    onTimeout: {
13        method: 'firedEvent',
14        params: ['onTimeout', 'more value']
15    },
16}, 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 
 1 
 2Button {
 3    label: string
 4    color?: Color
 5    size?: Size
 6    rounded?: boolean
 7    squared?: boolean
 8    bordered?: boolean
 9    flat?: boolean
10    icon?: string
11    rightIcon?: string
12}
Action options 
 1 
 2Color = 'primary' | 'secondary' | 'positive' | 'negative' |
 3        'warning' | 'info' | 'dark'
 4ActionOptions extends Button {
 5    label?: string
 6    method?: string
 7    params?: any
 8    url?: string
 9    execute?: CallableFunction
10}
Icons 
 
success | error | info | warning | question
Events 
1
2onClose | onDismiss | onTimeout
3
4EventOptions {
5    method?: string
6    params?: any
7    url?: string
8}
🪁 Playground