Components

Sonner

An opinionated toast notification component. Includes a sonner-flash bridge that turns Laravel session flashes into toasts.

php artisan blatui:add sonner

<x-ui.button variant="outline" x-on:click="window.toast('Event has been created')">
    Show Toast
</x-ui.button>

<x-ui.sonner />

Promise

{{-- A promise toast: loading → success/error on settle. --}}
<div class="flex flex-wrap items-center gap-2">
    <x-ui.button variant="outline"
        x-on:click="window.toast.promise(new Promise((resolve) => setTimeout(resolve, 2000)), { loading: 'Saving changes…', success: 'Changes saved', error: 'Could not save' })">
        Show promise toast
    </x-ui.button>
</div>

<x-ui.sonner />

Stack

{{-- Fire several toasts: they collapse into a stack — hover (or focus) to fan them out. --}}
<x-ui.button variant="outline" x-on:click="
    window.toast.success('Profile saved');
    window.toast({ title: 'Scheduled', description: 'Friday at 5:57 PM' });
    window.toast.info('New login from Chrome');
">
    Stack 3 toasts
</x-ui.button>

<x-ui.sonner />

Types

<div class="flex flex-wrap items-center gap-2">
    <x-ui.button variant="outline" x-on:click="window.toast.success('Event has been created')">
        Success
    </x-ui.button>
    <x-ui.button variant="outline" x-on:click="window.toast.error('Something went wrong')">
        Error
    </x-ui.button>
    <x-ui.button variant="outline" x-on:click="window.toast({ title: 'Scheduled: Catch up', description: 'Friday, February 10, 2023 at 5:57 PM' })">
        Description
    </x-ui.button>
</div>

<x-ui.sonner />

Variants

<div class="flex flex-wrap items-center gap-2">
    <x-ui.button variant="outline" x-on:click="window.toast.success('Changes saved')">Success</x-ui.button>
    <x-ui.button variant="outline" x-on:click="window.toast.error('Something went wrong')">Error</x-ui.button>
    <x-ui.button variant="outline" x-on:click="window.toast.warning('Your trial ends soon')">Warning</x-ui.button>
    <x-ui.button variant="outline" x-on:click="window.toast.info('A new version is available')">Info</x-ui.button>
</div>

<x-ui.sonner />

With Action

{{-- A toast with an action button (e.g. Undo). --}}
<div class="flex flex-wrap items-center gap-2">
    <x-ui.button variant="outline"
        x-on:click="window.toast({ title: 'Event deleted', description: 'The event has been removed from your calendar.', action: { label: 'Undo', onClick: () => window.toast.success('Event restored') } })">
        Show toast
    </x-ui.button>
</div>

<x-ui.sonner />

API Reference

Props, slots and exposed methods for <x-ui.sonner>.

Props

Prop	Type	Default	Description
`position`	`string`	`'bottom-right'`	Where the toast stack is anchored on screen. `top-left` `top-center` `top-right` `bottom-left` `bottom-center` `bottom-right`
`expand`	`bool`	`false`	Keep toasts always expanded as a list. When false the toasts collapse into a stack that fans out on hover or focus.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`window.toast(opts)`	Show a toast. Pass a string (the title) or an options object: { title, description, type, duration, action: { label, onClick } }. type is one of default, success, error, warning, info, loading; duration is ms (Infinity to keep it until dismissed).
`window.toast.success(msg)`	Shortcut for a success toast. Also available: toast.error, toast.warning, toast.info, toast.loading.
`window.toast.promise(p, opts)`	Show a loading toast that resolves to success or error when the promise settles. opts is { loading, success, error }.