Wiretoast Preview

9 visual themes · 5 semantic types · 7 positions · automatic dark mode + opt-in

Controls

Trigger by type

Test every position

API (same in all three environments, always notify)

JavaScript (vanilla)

window.notify('Saved successfully', 'success');
window.notify({ title: 'Saved', message: 'All changes applied' }, 'success');
window.notify('Heads up', 'warning', { position: 'bottom-center', timeout: 3000 });

Alpine.js

<button @click="$dispatch('notify', { message: 'Hello', type: 'success' })">
    Trigger
</button>

<button @click="$dispatch('notify', {
    title: 'Saved',
    message: 'All good',
    type: 'success',
    position: 'bottom-right'
})">With title</button>

Livewire (PHP)

// Plain text
$this->notify('Saved successfully', 'success');

// With title
$this->notify(['title' => 'Saved', 'message' => 'All good'], 'success');

// With options
$this->notify('Heads up', 'warning', [
    'position' => 'bottom-center',
    'timeout'  => 3000,
]);

Types: success, error, warning, info, neutral. Theme: data-wt-theme on <body>. Mode: data-wt-theme-mode. Default position: data-wt-default-position.

Internally, both Livewire and Alpine fire a notify CustomEvent on window, which the component listens for.