Components / Toast

Toast

# Introduction

A toast is a non-modal, unobtrusive window element used to display brief, auto-expiring windows of information to a user. Toasts are often used to display notifications, alerts, or confirmations.

# Usage

In order to use the Toast component, you need to add <zinq:toast /> to the <body> tag.
If your application will be using toasts, it is recommended to add the toast component to the main layout file.

  
<head>
    ...
</head>
<body>
    ... 
    
    <zinq:toast />
</body>

# Configuration

# Variant

  
<div class="flex flex-wrap space-x-3">
    <zinq:button toast="Your profile has been updated.">Info</zinq:button>
    <zinq:button toast="Your profile has been updated." toastType="success">Success</zinq:button>
    <zinq:button toast="An error occurred when updating your profile." toastType="error">Error</zinq:button>
    <zinq:button toast="No active subscription." toastType="warning">Warning</zinq:button>
</div>

# Position

  
<div class="flex flex-wrap space-x-3">
    <zinq:button toast="Your profile has been updated." toastPosition="top-left">Top left</zinq:button>
    <zinq:button toast="Your profile has been updated." toastPosition="top-right">Top right</zinq:button>
    <zinq:button toast="Your profile has been updated." toastPosition="bottom-left">Bottom left</zinq:button>
    <zinq:button toast="Your profile has been updated." toastPosition="bottom-right">Bottom right</zinq:button>
</div>

# Duration

  
<div class="flex flex-wrap space-x-3">
    <zinq:button toast="Your profile has been updated." toastDuration="1000">1 second</zinq:button>
    <zinq:button toast="Your profile has been updated." toastDuration="3000">3 seconds</zinq:button>
    <zinq:button toast="Your profile has been updated." toastDuration="5000">5 seconds</zinq:button>
</div>

# Displaying

There are two ways to display a toast:

  • using the Zinq facade, you can call the following methods:
    • Zinq::toast('...')
    • Zinq::toastSuccess('...')
    • Zinq::toastError('...')
    • Zinq::toastWarning('...')
  • using the <zinq:button /> component:
    • <zinq:button toast="...">Show Toast</zinq:button>

# Livewire component

You can use the Zinq facade to display a toast message from a Livewire component.

  
use Mattbit\Zinq\Facades\Zinq;

class Profile extends Component
{
    public function save(): void
    {
        // Save data...

        Zinq::toast('Your profile has been updated');
    }

    public function render(): View
    {
        return view('livewire.profile');
    }
}

# Button

You can use the <zinq:button /> component to display a toast message.

# Flash

If you want to show a toast message after a page reload/redirect, you can use one of the flash methods from Zinq facade:

  • Zinq::flash('...')
  • Zinq::flashSuccess('...')
  • Zinq::flashError('...')
  • Zinq::flashWarning('...')
  
use Mattbit\Zinq\Facades\Zinq;

public function save(): void
{
    // Save data
    
    Zinq::flash('Data saved successfully');
    $this->redirect('dashboard');
}

# Configuration

When displaying a Toast component, you can configure the position and duration of the toast by passing the following attributes:

  • position : The position of the toast. Use enum Mattbit\Zinq\Enums\ToastPositionEnum to set the position.
  • duration : The duration of the toast in milliseconds.

You can configure default position and default duration values in the config/zinq.php file.
Or you can pass the values directly to the component.

  
use Mattbit\Zinq\Enums\ToastPositionEnum;
use Mattbit\Zinq\Facades\Zinq;

Zinq::toast(
    message: 'Hello World',
    position: ToastPositionEnum::TOP_RIGHT,
    duration: 3000,
);