Notification Component

The Notification component provides a toast notification system.

Usage

Once the notification component is included in your layout, you can trigger notifications from anywhere using JavaScript by dispatching the notify window event:

window.dispatchEvent(new CustomEvent('notify', {
    detail: {
        variant: 'success',
        title: 'Success!',
        message: 'Your changes have been saved.',
        displayDuration: 8000
    }
}));

With Alpine.js

Trigger notifications from Alpine.js components using window.dispatchEvent():

<div x-data="{ count: 0 }">
    <x-button 
        x-on:click="
            count++;
            window.dispatchEvent(new CustomEvent('notify', {
                detail: {
                    variant: 'info',
                    title: 'Counter Updated',
                    message: `Count is now ${count}`
                }
            }))
        "
    >
        Increment Counter
    </x-button>
</div>

With Livewire

Dispatch notifications from Livewire components using the dispatch() method:

$this->dispatch('notify',
    variant: 'success',
    title: __('Status Updated'),
    message: __('Order status has been updated successfully.')
);

From Laravel (Session Flash)

Trigger notifications using session flash messages. This is useful for redirects after operations:

session()->flash('notification', [
    'variant' => 'success',
    'title' => __('User Deleted'),
    'message' => __('The user has been deleted successfully.'),
]);

Notification Variants

The notification system supports four variants, each with its own color scheme and icon:

Info

window.dispatchEvent(new CustomEvent('notify', {
    detail: {
        variant: 'info',
        title: 'Information',
        message: 'This is an informational message.'
    }
}));

Success

window.dispatchEvent(new CustomEvent('notify', {
    detail: {
        variant: 'success',
        title: 'Success',
        message: 'Operation completed successfully!'
    }
}));

Warning

window.dispatchEvent(new CustomEvent('notify', {
    detail: {
        variant: 'warning',
        title: 'Warning',
        message: 'Please review your input.'
    }
}));

Danger / Error

window.dispatchEvent(new CustomEvent('notify', {
    detail: {
        variant: 'danger', // or 'error'
        title: 'Error',
        message: 'Something went wrong.'
    }
}));

From Laravel (Session Flash)

You can trigger notifications from Laravel using session flash messages. This is useful for redirects after form submissions:

return redirect()->route('dashboard')->with('notification', [
    'variant' => 'success',
    'title' => 'Welcome back!',
    'message' => 'You have successfully logged in.',
    'displayDuration' => 5000,
]);

Event Details

Property	Type	Default	Description
variant	string	info	Notification type. Options: info, success, warning, danger, error
title	string|null	null	Notification title (optional)
message	string|null	null	Notification message body (optional)
displayDuration	int	8000	Duration in milliseconds before auto-dismiss (8000 = 8 seconds)
sender	string|null	null	Sender identifier (reserved for future use)

References

Category	Path / Name	Description
Component	resources/views/components/notification.blade.php	Notification component file

For the detailed documentation, please visit the Penguin UI Notifications.