Toast

Toast notifications triggered programmatically from any Alpine context via the $wirestrap.toast magic helper, or from Livewire PHP via the WithWirestrap trait. Toasts are created on the fly and appended to the document body.

Multiple toasts can stack on screen at the same time. They auto-dismiss after 5 seconds by default, pause on hover, and close on click.

Triggering a toast

Pass a string for a bare message, or an options object for anything more:

// Simple string
$wirestrap.toast('File saved successfully.')

// Options object
$wirestrap.toast({ type: 'success', message: 'File saved successfully.' })

From a Blade template, wire it directly to a button click:

<button x-on:click="$wirestrap.toast('Profile updated.')">
    Save
</button>

Variants

Five built-in variants: primary, success, info, warning, danger. type is just a CSS class on the toast element, so any custom class name works.

$wirestrap.toast({ type: 'primary', message: 'A new version is available.' })
$wirestrap.toast({ type: 'success', message: 'Changes saved.' })
$wirestrap.toast({ type: 'info', message: 'Your export is ready.' })
$wirestrap.toast({ type: 'warning', message: 'Unsaved changes will be lost.' })
$wirestrap.toast({ type: 'danger', message: 'Something went wrong.' })

$wirestrap.toast({ type: 'my-custom-toast', message: 'Custom style.' })

Title

Set title to add a header with a colored icon indicator. The icon color follows the variant.

$wirestrap.toast({
    type: 'success',
    title: 'Saved',
    message: 'Your changes have been saved.'
})

Persistent toasts

Set duration: 0 to keep a toast on screen until the user clicks it.

$wirestrap.toast({
    type: 'danger',
    title: 'Connection lost',
    message: 'Reconnecting…',
    duration: 0
})

From Livewire

Use $this->toast() in any Livewire component that includes the WithWirestrap trait. Multiple calls in the same request all fire when the response reaches the browser.

use Wirestrap\Traits\WithWirestrap;

class MyComponent extends Component
{
    use WithWirestrap;

    public function save(): void
    {
        // ...
        $this->toast('success', 'Changes saved.');
        $this->toast(type: 'success', message: 'User created.', title: 'Done');
        $this->toast(type: 'danger', message: 'Connection lost.', duration: 0);
    }
}

Global configuration

Call Wirestrap.toast.configure() once at boot to set defaults for every toast. Per-call options always take precedence over the global config.

Toasts appear in the bottom-right corner by default. The four built-in placement values map to the viewport corners: bottom-end, bottom-start, top-end, top-start. Like type, placement is just a CSS class, so custom values work. Set it before the first toast is shown, as the container is only created once.

Wirestrap.toast.configure({
    placement: 'top-end',
    duration: 4000,
    max: 5
})

Options

$wirestrap.toast()

Wirestrap.toast.configure()