Toast

A toast is a non-modal, unobtrusive window element used to display brief, auto-expiring information to the user. Toasts are generally used for system messaging, and as such should be used sparingly.

Preparation

If you are using the aura:app-container component, you are set to use the toast component. If you are not using the aura:app-container component, you can use the toast component by adding the following code somewhere in your layout.

Make sure to only include the toast component once in your rendered content.

Copy to clipboard

<aura:toast />

Basic Usage

To deploy a toast, you can use following code anywhere in your application.

Copy to clipboard

Aura::toast(title: 'Toast', message: 'This is a toast message.');

When in Livewire, you can use the following code.

Copy to clipboard

$this->toast(
    title: 'Success',
    message: 'The record has been saved successfully.',
    type: 'success',
    duration: 3000
);

To trigger a toast from the frontend, you can use wire:click event and alpine.js to dispatch an event.

Copy to clipboard

<aura:button
    text="Show Toast"
    wire:click="$dispatch(
        'show-toast', { 
            title: 'Toast', message: 'This is a toast message.' 
        }
    )" 
/>

Example

Here is an example of a toast with a success message.

Types

The toast component supports the following types:

default (no parameter)
success
info
warning
danger

Custom Duration

You can set a custom duration for the toast to be displayed. The duration is in milliseconds.

Copy to clipboard

$this->toast(
    title: 'Durable',
    message: 'This toast will last for 10 seconds.',
    duration: 10000
);

Or a persistent toast that will last until dismissed can be shown by setting the duration to 0.

Copy to clipboard

$this->toast(
    title: 'Persistent',
    message: 'This toast will last until dismissed.',
    duration: 0
);

Home