WireUi

The WireUI notification API is a versatile tool that allows you to present alerts, notifications, and action confirmations in your web application. These notifications are seamlessly integrated with Livewire events, enabling you to harness the full power of Livewire for dynamic interactivity.

With this integration, you have the freedom to customize notifications according to your application's requirements. You can control various aspects of their appearance, behavior, and functionality to create a user experience that aligns perfectly with your project's goals and design. Whether you need simple alerts or more complex notifications with custom actions, the WireUI notification API provides you with the means to craft a tailored user experience.

Example use cases:

Alert for successful actions.
Action confirmation requests.
User notifications.
Message notifications.

First Steps

Please incorporate the component into the layout.

 1<html>
 2 
 3    <body>
 4        <x-notifications />
 5 
 6        {{-- Or With Attributes --}}
 7 
 8        <x-notifications z-index="z-50" />
 9        <x-notifications position="top-start" />
10        <x-notifications position="top" />
11        <x-notifications position="top-end" /> {{-- DEFAULT --}}
12        <x-notifications position="bottom-start" />
13        <x-notifications position="bottom" />
14        <x-notifications position="bottom-end" />
15    </body>
16 
17</html>

JavaScript Notification

You can generate notifications directly through JavaScript.

 1<x-button
 2    x-on:click="$wireui.notify({
 3    icon: 'success',
 4    title: 'Success Notification!',
 5    description: 'This is a description.',
 6})"
 7    positive>
 8    Success Notification
 9</x-button>
10 
11<x-button
12    x-on:click="$wireui.notify({
13    icon: 'error',
14    title: 'Error Notification!',
15    description: 'Woops, its an error.',
16})"
17    negative>
18    Error Notification
19</x-button>
20 
21<x-button
22    x-on:click="$wireui.notify({
23    icon: 'info',
24    title: 'Info Notification!',
25    description: 'This is a description.',
26})"
27    info>
28    Info Notification
29</x-button>

Livewire Notification

You can directly generate notifications from a Livewire Component.

 1namespace App\Livewire;
 2 
 3use Livewire\Component;
 4use WireUi\Traits\WireUiActions;
 5 
 6class MyComponent extends Component
 7{
 8    use WireUiActions;
 9 
10    public function infoNotification(): void
11    {
12        $this->notification()->send([
13            'icon' => 'info',
14            'title' => 'Info Notification!',
15            'description' => 'This is a description.',
16        ]);
17    }
18 
19    public function errorNotification(): void
20    {
21        $this->notification()->send([
22            'icon' => 'error',
23            'title' => 'Error Notification!',
24            'description' => 'Woops, its an error.',
25        ]);
26    }
27 
28    public function successNotification(): void
29    {
30        $this->notification()->send([
31            'icon' => 'success',
32            'title' => 'Success Notification!',
33            'description' => 'This is a description.',
34        ]);
35    }
36}

 1<x-button wire:click="successNotification" positive>
 2    Success Notification
 3</x-button>
 4 
 5<x-button wire:click="errorNotification" negative>
 6    Error Notification
 7</x-button>
 8 
 9<x-button wire:click="infoNotification" info>
10    Info Notification
11</x-button>

Confirm Notification

You might also need to request user confirmation for a specific action. The Notifications API provides a dedicated method for this purpose. Check out the example below.

You can create a confirmation notification using Blade.

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

1<x-button wire:click="confirmSimple" info>
2    Confirm Simple
3</x-button>
4 
5<x-button wire:click="confirmFull" info>
6    Confirm Full
7</x-button>

You can generate a confirmation notification using JavaScript.

 1<x-button
 2    x-on:click="$wireui.confirmNotification({
 3    title: 'Are you Sure?',
 4    description: 'Save the information?',
 5    icon: 'question',
 6    acceptLabel: 'Yes, save it',
 7    method: 'save',
 8    params: 'Saved',
 9})"
10    info>
11    Confirm Simple
12</x-button>
13 
14<x-button
15    x-on:click="$wireui.confirmNotification({
16    title: 'Are you Sure?',
17    description: 'Save the information?',
18    icon: 'question',
19    accept: {
20        label: 'Yes, save it',
21        execute: () => window.$wireui.notify({
22            'title': 'You confirmed',
23            'icon': 'success'
24        })
25    },
26    reject: {
27        label: 'No, cancel',
28        execute: () => window.$wireui.notify({
29            'title': 'You not confirmed',
30            'icon': 'error'
31        })
32    }
33})"
34    info>
35    Confirm Full
36</x-button>

Notification Events

Notifications can come with three events: onClose, onDismiss, and onTimeout. Each event will trigger when its corresponding action occurs.

Events:

The onClose event will be triggered whenever the notification is removed, whether it's due to a timer expiration, user-initiated closure, or clicking on an action.
The onDismiss event will be activated when the user explicitly dismisses the notification.
The onTimeout event will be fired each time the notification's timer runs out.

You can create events using JavaScript by employing a closure.

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

Alternatively, you can utilize these events to trigger actions on the Livewire Component, and in this scenario, having the component ID is essential.

 1window.$wireui.notify({
 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)

You can also employ events for notifications generated by the Livewire Component.

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

Notifications API

Prop	Type	Default	Required
z-index	string	CONFIG	false
position	string	CONFIG	false