TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

Powerful suite of Blade components for TALL Stack apps

Toast

Toast component.

# Configuration

  • Insert the toast component on your main layout: 
    <html>
        <body>
            <x-toast /> 
     
            <!--... -->
        </body>
    </html>
  • Use the Interactions trait in your Livewire component: 
    use TallStackUi\Traits\Interactions; 
     
    class CreateUser extends Component
    {
        use Interactions; 
     
        // ...
    }
  • Dispatch the Toast from a Livewire method: 
    public function save(): void
    {
        $this->toast()->success('...')->send();
        $this->toast()->error('...')->send();
        $this->toast()->warning('...')->send();
        $this->toast()->info('...')->send();
    }

# Basic Usage 

$this->toast()->success('Success', 'This is a success message.')->send();
$this->toast()->error('Error', 'This is an error message.')->send();
$this->toast()->warning('Warning', 'This is a warning message.')->send();
$this->toast()->info('Info', 'This is an info message.')->send();

# Confirmations

Interacting with actions. 

public function save(): void
{
    $this->toast()
        ->question('Warning!', 'Are you sure?')
        ->confirm('Confirm', 'confirmed', 'Confirmed Successfully')
        ->cancel('Cancel', 'cancelled', 'Cancelled Successfully')
        ->send();
}
 
public function confirmed(string $message): void
{
    $this->toast()->success('Success', $message)->send();
}
 
public function cancelled(string $message): void
{
    $this->toast()->error('Cancelled', $message)->send();
}
public function save(): void
{
    // 1. The methods `confirm()` and `cancel()` are optional.
    $this->toast()
        ->question('Warning!', 'Are you sure?')
        ->send();
 
    // 2. You can set only `confirm()` or `cancel()`.
    // Different than Dialog, only the defined button will be shown.
    $this->toast()
        ->question('Warning!', 'Are you sure?')
        ->confirm('Confirm', 'confirmed', 'Confirmed Successfully')
        ->send();
 
    // 3. You can make `confirm()` and `cancel()`
    // as static buttons just by defining the text.
    $this->toast()
        ->question('Warning!', 'Are you sure?')
        ->confirm('Confirm')
        ->cancel('Cancel')
        ->send();
 
    // 4. You can set only the method and parameters
    // to use the original text in the buttons.
    $this->toast()
        ->question('Warning!', 'Are you sure?')
        ->confirm(method: 'confirmed', params: 'Confirmed Successfully')
        ->cancel(method: 'cancelled', params: 'Cancelled Successfully')
        ->send();
 
    // 5. You can ask for a confirmation with other Toast types
    $this->toast()
        ->success('Success!', 'Process completed successfully.')
        ->confirm('Undo', 'undo')
        ->cancel('Ok')
        ->send();
}

# Time Control

Increase the time to show the toast. 

$this->toast()
    ->timeout(seconds: 10)
    ->success('Success', 'This is a success message.')
    ->send();

You can also control the default time by interacting with the configuration file.

Then use the timeout method without parameters: 

$this->toast()
    ->timeout() 
    ->success('Success', 'This is a success message.')
    ->send();

# Persistent

An option to not set an expiration time and also hide the progress bar. 

$this->toast()
    ->persistent()
    ->success('Success', 'This is a persistent toast.')
    ->send();

# Expandable

An option to show minimized description texts. 

$this->toast()
    ->expandable()
    ->success('Success', 'When the description has more than 30 characters, the toast can be optionally expandable.')
    ->send();

You can configure Toast to be extensible by default in the configuration file. When you do that, you can optionally ignore the expandable for specific Toast: 

$this->toast()
    ->expandable(false) 
    ->success('Success', 'This Toast will not be expandable.')
    ->send();

# Position

An option to control the toast position at runtime. 

/* Available positions: top-left, top-right, top-center, bottom-left, bottom-right, bottom-center */
 
$this->toast()
    ->position('top-left') 
    ->success('Success', 'This is a success message.')
    ->send();
 
$this->toast()
    ->position('top-center') 
    ->success('Success', 'This is a success message.')
    ->send();
 
$this->toast()
    ->position('bottom-center') 
    ->success('Success', 'This is a success message.')
    ->send();

# Sole 

$this->toast()
    ->sole() 
    ->success('Success', 'This is a success message.')
    ->send();

# Events

An option to listen to events. 

<div x-on:toast:accepted.window="alert($event.detail.description)"
     x-on:toast:rejected.window="alert($event.detail.description)"
     x-on:toast:timeout.window="alert($event.detail.description)">
    ...
</div>
Event Detail Fired when
toast:accepted { title, description, type } The confirm action is pressed
toast:rejected { title, description, type } The cancel action is pressed
toast:timeout { title, description, type } The toast times out
We recommend that you use listeners in one place, whether in the base layout or once per component.

# Hooks 

public function save(): void
{
    $this->toast()
        ->success('...')
        ->hook([
            // When close the toast by clicking on the "x" button.
            'close' => [
                'method' => 'method',
                // The parameters can be anything you want: arrays, strings, int.
                'params' => ['param1', 'param2']
            ],
            // When the toast is automatically closed by the timeout.
            'timeout' => [
                'method' => 'method',
                'params' => ['param1', 'param2']
            ],
        ])
        ->send();
}

Optionally, you can also set params as closure: 

public function save(): void
{
    $this->toast()
        ->success('...')
        ->hook([
            'close' => [
                'method' => 'method',
                'params' => fn () => ['param1', 'param2'] 
            ],
            'timeout' => [
                'method' => 'method',
                'params' => function () { 
                    return ['param1', 'param2'];
                }
            ],
        ])
        ->send();
}

The closure will be resolved using Laravel container and the result will be passed to the hook.

# JavaScript API

JavaScript API to interact with Toast. 

<div>
    <x-button color="green" onclick="show()">Success</x-button>
    <x-button color="red" onclick="error()">Error</x-button>
    <x-button color="yellow" onclick="warning()">Warning</x-button>
    <x-button color="info" onclick="info()">Info</x-button>
    <x-button color="secondary" onclick="confirm()">Confirmation</x-button>
 
    <script>
        show = () => $tsui.interaction('toast')
            .success('Success', 'This is a success message.')
            .send();
 
        error = () => $tsui.interaction('toast')
            .error('Error', 'This is an error message.')
            .send();
 
        warning = () => $tsui.interaction('toast')
            .warning('Warning', 'This is a warning message.')
            .send();
 
        info = () => $tsui.interaction('toast')
            .info('Info', 'This is an info message.')
            .send();
 
        // Confirm/cancel that call a Livewire method need the
        // component id, passed through `wireable()`.
 
        const component = Livewire.find('your-component-id-goes-here').id; 
 
        confirm = () => $tsui.interaction('toast')
            .wireable(component) 
            .question('Warning', 'Are you sure?')
            .confirm('Confirm', 'confirmed', 'Confirmed Successfully')
            .cancel('Cancel', 'cancelled', 'Cancelled Successfully')
            .send();
 
        // Omit the id to target the first Livewire component on the page.
 
        confirm = () => $tsui.interaction('toast')
            .wireable() 
            .question('Warning', 'Are you sure?')
            .confirm('Confirm', 'confirmed', 'Confirmed Successfully')
            .cancel('Cancel', 'cancelled', 'Cancelled Successfully')
            .send();
 
        // The same fluent methods as PHP: position, sole, stacked.
        $tsui.interaction('toast')
            .position('top-left')
            .success('Success', 'This is a success message.')
            .send();
 
        $tsui.interaction('toast')
            .sole()
            .success('Success', 'This is a success message.')
            .send();
    </script>
</div>
The toast hooks are unavailable in the JavaScript API.

# Display After Redirects

You can trigger a toast that will actually be displayed after a redirect action. Regardless of whether the redirection is to another Livewire component or to basic controllers, you can still display the toast. 

use Illuminate\Contracts\View\View;
use Livewire\Component;
use TallStackUi\Traits\Interactions;
 
class Payment extends Component
{
    use Interactions;
 
    public function render(): View
    {
        return view('livewire.livewire');
    }
 
    public function save()
    {
        $this->toast()
            ->success('Done!', 'Your money has been sent!')
            ->flash() 
            ->send();
 
        return $this->redirect(route('dashboard'));
    }
}

When using flash() method, the toast will not be displayed in the current request, but yes stored temporarily in the session and displayed in the next request.

# Dispatching via Controllers

You can trigger a toast via controllers.

use Illuminate\Http\Request;
use TallStackUi\Traits\Interactions;
 
class PaymentController extends Controller
{
    use Interactions; 
 
    public function index()
    {
        return view('payment.index', [
            //
        ]);
    }
 
    public function update(Request $request)
    {
        // ...
 
        $this->toast() 
            ->success('...')
            ->send();
    }
}

Because certain methods were created and designed to be used with Livewire components , methods like confirm , cancel and hooks will be unavailable and will throw exceptions when you try to use them in controllers.

# Colorful

You can invert the Toast colors using the colorful global so the body background takes the notification type color (green for success, red for error, and so on) with white text. Learn more about the global Colorful.

# Stacked
NEW

An option to stack the list of toasts.

PHP API:

$this->toast()
    ->stacked()
    ->success('Third', 'This toast is at the front of the pile.')
    ->send();

JS API:

$tsui.interaction('toast')
    .stacked()
    .success('Saved!')
    .send();

# Top on Mobile
NEW

Starting from v4, you can set the toast to be positioned at the top of the page when mobile. You can configure it by using the position method, mentioned above, or if you prefer, you can control it globally via the configuration file. using the top-on-mobile configuration, which is false by default.

Code highlighting provided by Torchlight