Toast

37 · UI elements

A short notification that appears at the bottom right of the screen for a few seconds and disappears on its own. It reports the result of an action such as saving, deleting or importing without disturbing the page; it comes installed in all the ready-made layouts.

acun:toast-container

Types

The notification is triggered by a toast event; the color is chosen with type, and when omitted info (dark gray) is used. Note that errors use error, not danger. The notification closes after 5 seconds; it can be closed earlier with the close button.

LIVE EXAMPLE

<div class="flex flex-wrap gap-2" x-data>
    <acun:button variant="success" x-on:click="$dispatch('toast', { type: 'success', message: 'Product saved.' })">Success</acun:button>
    <acun:button variant="danger" x-on:click="$dispatch('toast', { type: 'error', message: 'The record could not be deleted.' })">Error</acun:button>
    <acun:button variant="warning" x-on:click="$dispatch('toast', { type: 'warning', message: '2 records were skipped due to permissions.' })">Warning</acun:button>
    <acun:button variant="white" x-on:click="$dispatch('toast', { message: 'The import was queued.' })">Info</acun:button>
</div>

Prop	Values
`type`	success \| error \| warning \| info
`message`	Text to show

Notification with a link

When link and linkLabel are given, a link is added below the message and the notification stays for 8 seconds so it can be clicked. When the page has Livewire, the link opens without reloading the page (Livewire.navigate); otherwise it works like a regular link. Clicking it closes the notification.

LIVE EXAMPLE

<acun:button variant="white" x-data x-on:click="$dispatch('toast', { type: 'info', message: 'Import complete: 148 products added.', link: '#', linkLabel: 'Show the report' })">
    Notification with a link
</acun:button>

Prop	Values
`link`	Address to open
`linkLabel`	Link text

From Livewire

On the server, send the same event with dispatch() from any Livewire component; the named arguments become the fields of the notification.

PHP

$this->dispatch('toast', type: 'success', message: 'Product saved.');

$this->dispatch('toast', type: 'error', message: 'The import failed.', link: $reportUrl, linkLabel: 'Details');

Shortcut: WithToasts

Add the WithToasts trait to the Livewire component; toast() writes the same event more briefly. The methods are protected on purpose: they cannot be called from the browser. When no type is given, success is used; an unknown type throws an error.

PHP

use Acun\Ui\Livewire\Concerns\WithToasts;

class EditProduct extends Component
{
    use WithToasts;

    public function save(): void
    {
        // …
        $this->toast('Product saved.');
        $this->toast('The import failed.', 'error', link: $reportUrl, linkLabel: 'Details');
    }
}

After a redirect

When the action redirects to another page, an instant event does not reach the new page. Leave the notification in the session instead: it is shown once when the next page renders the container. Use toastAfterRedirect() in Livewire and Toast::flash() in a controller; several notifications can be queued.

PHP

// Livewire (WithToasts)
$this->toastAfterRedirect('Product added.');
$this->redirectRoute('products.index', navigate: true);

// Controller
use Acun\Ui\Support\Toast;

Toast::flash('Product added.');

return redirect()->route('products.index');

From JavaScript

The container listens for the event on window. Use $dispatch inside Alpine and CustomEvent in plain JavaScript; the fields are sent in detail.

// Alpine: x-on:click="$dispatch('toast', { type: 'success', message: 'Copied.' })"

window.dispatchEvent(new CustomEvent('toast', {
    detail: { type: 'warning', message: 'The connection is slow, retrying.' },
}));

Setup

acun:layout.sidebar, acun:layout.horizontal and acun:layout.auth already include the container. If you write your own layout, add the acun:toast-container component to the page once, before body closes. The container is an aria-live="polite" region: screen readers read new notifications without interrupting what the user is doing.

BLADE

<body>
    {{ $slot }}

    <acun:toast-container />
</body>

API

Props and slots

The values the component accepts.

Prop	Default	Description
`type`	`info`	success · error · warning · info (event field)
`message`	—	Notification text
`link`	`null`	When given, a link below the message; the notification stays for 8 seconds instead of 5. With Livewire it opens without a page reload
`linkLabel`	`null`	Link text

Slots: The container takes no props; the fields above are the content of the toast event. The container is an aria-live="polite" region.