Flux components
Toast
A short, temporary notification.
Put flux:toast once in your layout, then raise toasts from Alpine or Livewire. The buttons below are live.
<flux:toast />
<flux:button
variant="filled"
icon="check-circle"
x-data
x-on:click="$flux.toast({ heading: 'Done', text: 'Item added to your cart.', variant: 'success' })"
>Success toast</flux:button>
<flux:button
variant="filled"
icon="x-circle"
x-data
x-on:click="$flux.toast({ text: 'Could not reach the payment gateway.', variant: 'danger' })"
>Error toast</flux:button>From Livewire
Call Flux::toast() from a component and it appears after the round trip.
Flux::toast(
heading: 'Order placed',
text: 'Tracking code MDS-140529.',
variant: 'success',
);
{{-- In your Livewire component --}}
Flux::toast(
heading: 'Order placed',
text: 'Tracking code MDS-140529.',
variant: 'success',
);Position
The default is bottom end — the trailing edge, so it lands bottom-left in RTL and bottom-right in LTR.
Reference
flux:toast
| Prop | Description |
|---|---|
| position | Two words, vertical then horizontal, e.g. bottom end, top start. Default: bottom end. |
$flux.toast(…)
Alpine magic. Takes heading, text, variant (success, warning, danger, info) and duration.