Toast

A succinct message that is displayed temporarily.

Usage

Place the <x-plume::toaster /> component once in your main layout (e.g., app.blade.php).

Only one <x-plume::toaster /> instance is allowed per application. Multiple instances will result in duplicate notifications.

blade

<x-plume::toaster position="bottom-right"
                />

Triggering from JavaScript

You can trigger toasts from anywhere in your application using AlpineJS magic helpers or the global store.

Magic Helpers (Recommended)

javascript

// Basic toast
                        $toast('Message here')

                        // With options
                        $toast('Action failed', {
                        type: 'error',
                        title: 'Error'
                        })

                        // Shorthands
                        $success('Data saved successfully')
                        $error('Validation failed')

AlpineJS Store

javascript

$store.toasts.add({
                        title: 'Success!',
                        message: 'Data saved.',
                        type: 'success'
                        })

Examples

Triggering Toasts

Use AlpineJS magic helpers for quick notifications.

blade

<div class="flex flex-wrap gap-4">
    <x-plume::button x-on:click="$success('Operation completed successfully.')">
        Success Toast
    </x-plume::button>
    <x-plume::button style="error" x-on:click="$error('Something went wrong.')">
        Error Toast
    </x-plume::button>
    <x-plume::button style="outline"
        x-on:click="$toast('Here is some useful information.', { type: 'info', title: 'Info' })">
        Info Toast
    </x-plume::button>
</div>

Custom Duration

Control how long the toast stays on screen (in milliseconds).

blade

<div class="flex flex-wrap gap-4">
    <x-plume::button style="outline"
        x-on:click="$toast('This will disappear in 1 second.', { duration: 1000 })">
        1s Duration
    </x-plume::button>
    <x-plume::button style="outline"
        x-on:click="$toast('This will stay for 10 seconds.', { duration: 10000 })">
        10s Duration
    </x-plume::button>
    <x-plume::button style="outline"
        x-on:click="$toast('This will not autoclose.', { autoclose: false })">
        No Autoclose
    </x-plume::button>
</div>

Prop	Type	Default	Description
position	string	'bottom-right'	Position of the toast stack: 'top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center'.