Start building

Platform

Open Source

Resources

Sign in

Toast

x-toast

A global notification stack with progress bars, hover-to-pause, and four types. Trigger from JS, Blade sessions, or Livewire events. The stack is a polite aria-live region and every toast has a keyboard-accessible dismiss button.

php artisan components:add toast

Examples

Types

Click a button to pop a toast — success, error, warning or info.

<div class="flex flex-wrap items-center justify-center gap-3">
    <x-components.button variant="outline" x-on:click="window.toast('Saved successfully!', 'success')">Success</x-components.button>
    <x-components.button variant="outline" x-on:click="window.toast('Something went wrong', 'error', 'Please try again later.')">Error</x-components.button>
    <x-components.button variant="outline" x-on:click="window.toast('Heads up', 'warning')">Warning</x-components.button>
    <x-components.button variant="outline" x-on:click="window.toast('New update available', 'info')">Info</x-components.button>
</div>
<x-components.toast />

Props

Prop Type Default Description
duration text 5000 How long each toast stays visible, in milliseconds.