TallStackUI, Toast

# Configuration

1. Insert the Toast component on your main layout.

<html>
    <body>
        <x-toast /> 
 
        <!--... -->
    </body>
</html>

2. Use the Interactions trait in your Livewire component.

use TallStackUi\Traits\Interactions; 
 
class CreateUser extends Component
{
    use Interactions; 
 
    // ...
}

3. Dispatch the Toast from a method.

public function save(): void
{
    $this->toast()->success('...')->send();
    $this->toast()->error('...')->send();
    $this->toast()->warning('...')->send();
    $this->toast()->info('...')->send();
}

This is an example. You can't dispatch all at the same time.

# 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();
}

As of version 1.10.0, the Toast has been improved to allow more flexibility in the format of use:

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();

Starting from version 1.14.2, you can set a default timeout through configuration file:

// In config/tallstackui.php file
'toast' => [
    // ...
    'timeout' => 10, 
],
 
// Then use the timeout() method without parameters
$this->toast()
    ->timeout() 
    ->success('Success', 'This is a success message.')
    ->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();

# 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>

We recommend that you use listeners in one place, whether in the base layout or once per component.

# 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 = () => $interaction('toast')
            .success('Success', 'This is a success message.')
            .send();
 
        error = () => $interaction('toast')
            .error('Success', 'This is a error message.')
            .send();
 
        warning = () => $interaction('toast')
            .warning('Success', 'This is a warning message.')
            .send();
 
        info = () => $interaction('toast')
            .info('Success', 'This is a info message.')
            .send();
 
        // To use confirmations the use and interact with methods of
        // a Livewire component, it is necessary to pass the id of
        // the component where the method is defined. You need to
        // do this by interacting with the `wireable()` method.
 
        const component = Livewire.find('your-component-id-goes-here').id; 
 
        confirm = () => $interaction('toast')
            .wireable(component) 
            .question('Warning', 'Are you sure?')
            .confirm('Confirm', 'confirmed', 'Confirmed Successfully')
            .cancel('Cancel', 'cancelled', 'Cancelled Successfully')
            .send();
 
        // Alternatively, you can pass the component id as an
        // empty string to use the FIRST LIVEWIRE COMPONENT OF THE PAGE.
 
        confirm = () => $interaction('toast')
            .wireable() 
            .question('Warning', 'Are you sure?')
            .confirm('Confirm', 'confirmed', 'Confirmed Successfully')
            .cancel('Cancel', 'cancelled', 'Cancelled Successfully')
            .send();
    </script>
</div>

# Color Personalization

Starting from version 1.5.3 you can customize Toast colors through deep personalization.

Starting from version 1.23.0 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.

# Configurations

This component contains settings available in the configuration file. Click here to learn more.

Toast

Toast, Personalization Blocks