Simple Livewire and Tailwind notifications

notification.blade.php

<div>
    @if ($loaded)
        <div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto">
            <div class="rounded-lg shadow-xs overflow-hidden">
                <div class="p-4">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            @if ($type === 'success')
                                <svg class="h-6 w-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                            @elseif ($type === 'warning')
                                <svg class="h-6 w-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                                </svg>
                            @elseif ($type === 'info')
                                <svg class="h-6 w-6 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                                </svg>
                            @elseif ($type === 'error')
                                <svg class="h-6 w-6 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                                </svg>
                            @endif
                        </div>
                        <div class="ml-3 w-0 flex-1 pt-0.5">
                            <p class="text-sm leading-5 font-medium text-gray-900">
                                {{ $title }}
                            </p>
                        </div>
                        <div class="ml-4 flex-shrink-0 flex">
                            <button wire:click="hide" class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150">
                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

Notification.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Notification extends Component
{
    public $loaded = false;

    public $title = 'Default notification message';

    public $type = 'success';

    protected $listeners = [
        'notify' => 'renderNotification'
    ];

    public function render()
    {
        return view('livewire.notification');
    }

    public function hide()
    {
        $this->title = '';
        $this->loaded = false;
    }

    public function renderNotification(string $title, string $type = 'success')
    {
        $this->title = $title;
        $this->type = $type;
        $this->loaded = true;
    }
}

OtherComponent.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithPagination;

class OtherComponent extends Component
{
    public function doSomething()
    {
        /** Do some logic around your components action **/
      
        // send over notification level: success|info|warning|error
        $this->emit('notify', 'Notification title', 'level');
    }

    public function render()
    {
        return view('livewire.other-component');
    }
}

somefile.blade.php

<livewire:notification />