WireUI
WireUI
Notifications

The WireUI notification API is designed to show alerts, notifications and action confirmations. Notifications use Livewire events to work. You can customize a notification however you like.

Example use cases:

  • Alert succeced action
  • Confirm an action
  • User notification
  • Message notifications
First Steps

Add the component to the layout

 1<html>
 2    <body>
 3        <x-notifications />
 4 
 5        or with attributes
 6 
 7        <x-notifications z-index="z-50" />
 8        <x-notifications position="top-left" />
 9        <x-notifications position="top-center" />
10        <x-notifications position="top-right" /> this is the default
11        <x-notifications position="bottom-left" />
12        <x-notifications position="bottom-center" />
13        <x-notifications position="bottom-right" />
14    </body>
15</html>
JavaScript Notification

Notifications can be created directly via JavaScript 

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

Notifications can be created directly from a 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->notification()->success(
19            $title = 'Profile saved',
20            $description = 'Your profile was successfully saved'
21        );
22        $this->notification()->error(
23            $title = 'Error !!!',
24            $description = 'Your profile was not saved'
25        );
26 
27        // or use a full syntax
28        $this->notification([
29            'title'       => 'Profile saved!',
30            'description' => 'Your profile was successfully saved',
31            'icon'        => 'success'
32        ]);
33        $this->notification()->send([
34            'title'       => 'Profile saved!',
35            'description' => 'Your profile was successfully saved',
36            'icon'        => 'success'
37        ]);
38    }
39}
Alert Notifications

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 notifications 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 Notifications

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

You can create a confirmation notification by the blade

 1<button onclick="window.$wireui.confirmNotification({
 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})">
15    Save Information
16</button>

Attention

This directive does not work on a blade component, like the x-button

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->notification()->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->notification()->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.confirmNotification({
 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)
Notifications Events

Notifications 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 notification 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 notification
  • The onTimeout event will fire every time the notification runs out.

You can create events via JavaScript using a 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.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)

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->notification([
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}
Notifications Options

Options

Prop Required Default Type
title false none string
description false none string
icon false none NotificationIcon|all heroicons
iconColor false none string
img false none string
closeButton false true boolean
timeout false 8500 int
dense false none boolean
rightButtons false false boolean
progressbar false true boolean
params false none any
method false none string
emit false none string
to false none string
accept false none NotificationAction
reject false none NotificationAction
acceptLabel false none string
rejectLabel false none string
onClose false none NotificationEvent|js closure
onDismiss false none NotificationEvent|js closure
onTimeout false none NotificationEvent|js closure

Custom Types

Notification Icon 

'success'|'error'|'info'|'warning'|'question'

Notification Action 

1{
2    label: string
3    style?: string
4    solid?: boolean
5    url?: string
6    execute?: closure
7    method?: string
8    params?: any
9}

Notification Event 

1{
2    url?: string
3    method?: string
4    params?: any
5}
🪁 Playground
Publishing

You can customize notification layout and styles publishing resources 

php artisan vendor:publish --tag='wireui.resources'