TallCraftUI

Dialog Components

Toast

Cyber Week Mega Offer!

Huge discounts on all Hostinger plans

Use our referral link for an extra 20% off!

Claim Your Discount Now

# Configuration 

{{-- Add the Toast component on your main layout. --}}
<body>
    <x-toast />
</body>

Import WithTcToast trait and call the $this->toast(...) method

use Developermithu\Tallcraftui\Traits\WithTcToast;
 
class Toast extends Component
{
    use WithTcToast;
 
    public function save()
    {
        $this->success(...);
        $this->error(...);
        $this->warning(...);
        $this->info(...);
 
        // OR
        $this->toast(...);
    }
}

# Basic Usage 

            <!--[if BLOCK]><![endif]-->        <button
 
 
 
                wire:loading.attr="disabled" wire:target=""
        type="submit" wire:click="showToast1"
 
    wire:click="showToast1" class="inline-flex gap-x-1.5 items-center border border-transparent w-fit justify-center font-semibold text-xs uppercase tracking-widest disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-2 focus:ring-offset-2 transition ease-in-out duration-200 dark:focus:ring-offset-0 bg-primary/90 text-white hover:bg-primary focus:bg-primary focus:ring-primary px-4 py-2 rounded"
    >
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    Toast 1
 
 
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
<!--[if BLOCK]><![endif]-->        </button>
<!--[if ENDBLOCK]><![endif]-->        <!--[if BLOCK]><![endif]-->        <button
 
 
 
                wire:loading.attr="disabled" wire:target=""
        type="submit" wire:click="showToast2"
 
    wire:click="showToast2" class="inline-flex gap-x-1.5 items-center border border-transparent w-fit justify-center font-semibold text-xs uppercase tracking-widest disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-2 focus:ring-offset-2 transition ease-in-out duration-200 dark:focus:ring-offset-0 bg-primary/90 text-white hover:bg-primary focus:bg-primary focus:ring-primary px-4 py-2 rounded"
    >
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    Toast 2
 
 
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
<!--[if BLOCK]><![endif]-->        </button>
<!--[if ENDBLOCK]><![endif]-->        <!--[if BLOCK]><![endif]-->        <button
 
 
 
                wire:loading.attr="disabled" wire:target=""
        type="submit" wire:click="showToast3"
 
    wire:click="showToast3" class="inline-flex gap-x-1.5 items-center border border-transparent w-fit justify-center font-semibold text-xs uppercase tracking-widest disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-2 focus:ring-offset-2 transition ease-in-out duration-200 dark:focus:ring-offset-0 bg-primary/90 text-white hover:bg-primary focus:bg-primary focus:ring-primary px-4 py-2 rounded"
    >
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    Toast 3
 
 
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
<!--[if BLOCK]><![endif]-->        </button>
<!--[if ENDBLOCK]><![endif]-->        <!--[if BLOCK]><![endif]-->        <button
 
 
 
                wire:loading.attr="disabled" wire:target=""
        type="submit" wire:click="showToast4"
 
    wire:click="showToast4" class="inline-flex gap-x-1.5 items-center border border-transparent w-fit justify-center font-semibold text-xs uppercase tracking-widest disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-2 focus:ring-offset-2 transition ease-in-out duration-200 dark:focus:ring-offset-0 bg-primary/90 text-white hover:bg-primary focus:bg-primary focus:ring-primary px-4 py-2 rounded"
    >
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    Toast 4
 
 
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
<!--[if BLOCK]><![endif]-->        </button>
<!--[if ENDBLOCK]><![endif]-->
// Toast 1
$this->toast('User created successfully'); // OR
$this->success('User created successfully');
 
// Toast 2
$this->success(
    title: 'User created successfully',
    description: 'Your changes have been saved permanently.'
);
 
// Toast 3
$this->success(
    title: 'User created successfully',
    description: 'Your changes have been saved permanently.',
    showProgress: true
);
 
// Toast 4
$this->success(
    title: 'User created successfully',
    description: 'Your changes have been saved permanently.',
    showCloseIcon: true
);

# Toast type 

            <!--[if BLOCK]><![endif]-->        <button
 
 
 
                wire:loading.attr="disabled" wire:target=""
        type="submit" wire:click="showSuccessToast"
 
    wire:click="showSuccessToast" class="inline-flex gap-x-1.5 items-center border border-transparent w-fit justify-center font-semibold text-xs uppercase tracking-widest disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-2 focus:ring-offset-2 transition ease-in-out duration-200 dark:focus:ring-offset-0 bg-green-600 text-white hover:bg-green-700 focus:bg-green-700 focus:ring-green-500 px-4 py-2 rounded"
    >
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    Success
 
 
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
<!--[if BLOCK]><![endif]-->        </button>
<!--[if ENDBLOCK]><![endif]-->        <!--[if BLOCK]><![endif]-->        <button
 
 
 
                wire:loading.attr="disabled" wire:target=""
        type="submit" wire:click="showWarningToast"
 
    wire:click="showWarningToast" class="inline-flex gap-x-1.5 items-center border border-transparent w-fit justify-center font-semibold text-xs uppercase tracking-widest disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-2 focus:ring-offset-2 transition ease-in-out duration-200 dark:focus:ring-offset-0 bg-yellow-600 text-white hover:bg-yellow-700 focus:bg-yellow-700 focus:ring-yellow-500 px-4 py-2 rounded"
    >
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    Warning
 
 
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
<!--[if BLOCK]><![endif]-->        </button>
<!--[if ENDBLOCK]><![endif]-->        <!--[if BLOCK]><![endif]-->        <button
 
 
 
                wire:loading.attr="disabled" wire:target=""
        type="submit" wire:click="showInfoToast"
 
    wire:click="showInfoToast" class="inline-flex gap-x-1.5 items-center border border-transparent w-fit justify-center font-semibold text-xs uppercase tracking-widest disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-2 focus:ring-offset-2 transition ease-in-out duration-200 dark:focus:ring-offset-0 bg-blue-600 text-white hover:bg-blue-700 focus:bg-blue-700 focus:ring-blue-500 px-4 py-2 rounded"
    >
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    Info
 
 
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
<!--[if BLOCK]><![endif]-->        </button>
<!--[if ENDBLOCK]><![endif]-->        <!--[if BLOCK]><![endif]-->        <button
 
 
 
                wire:loading.attr="disabled" wire:target=""
        type="submit" wire:click="showErrorToast"
 
    wire:click="showErrorToast" class="inline-flex gap-x-1.5 items-center border border-transparent w-fit justify-center font-semibold text-xs uppercase tracking-widest disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-2 focus:ring-offset-2 transition ease-in-out duration-200 dark:focus:ring-offset-0 bg-red-600 text-white hover:bg-red-700 focus:bg-red-700 focus:ring-red-500 px-4 py-2 rounded"
    >
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    Error
 
 
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
 
<!--[if BLOCK]><![endif]-->        </button>
<!--[if ENDBLOCK]><![endif]-->
$this->success('This is a success message');
$this->warning('This is a warning message');
$this->info('This is a info message');
$this->error('This is a error message');

# Toast position 

    <x-button wire:click="showTopRightToast" label="Top right" />
<x-button wire:click="showTopLeftToast" label="Top left" />
<x-button wire:click="showBottomRightToast" label="Bottom right" />
<x-button wire:click="showBottomLeftToast" label="Bottom left" />
$this->success(title: 'User created successfully', position: 'top-right');
$this->success(title: 'User created successfully', position: 'top-left');
$this->success(title: 'User created successfully', position: 'bottom-right');
$this->success(title: 'User created successfully', position: 'bottom-left');

# With progress bar 

<x-button wire:click="showProgressToast" label="Progress" />
$this->success(title: 'User created successfully', showProgress: true);

# With redirecting 

<x-button wire:click="showRedirectToast" label="Redirect" />
$this->success(
    title: 'User created successfully',
    redirectTo: route('docs.installation')
);

# Duration

By default, toasts disappear after 3 seconds. To adjust this, specify a custom duration in milliseconds using the timeout prop. 
<x-button wire:click="showDurationToast" label="Duration" />
$this->success(title: 'User created successfully', timeout: 5000);

# Persist

To keep the toast open indefinitely, set the timeout prop to 0. 
<x-button wire:click="showPersistToast" label="Persist" />
$this->success(title: 'User created successfully', timeout: 0);

# With description 

<x-button wire:click="showDescriptionToast" label="Description" />
$this->success(
    title: 'User created successfully',
    description: 'Your changes have been saved permanently.'
);

# All available props 

$this->toast(
    type: 'success',
    title: 'User created successfully',
    description: 'Your changes have been saved permanently',
    position: 'bottom-right',
    icon: 'check-circle',
    showCloseIcon: false,
    showProgress: false,
    timeout: 3000,
    redirectTo: '/'
);

Default settings

Change toast default settings according your needs config/tallcraftui.php 

return [
    'toast' => [
        'position' => ToastPosition::BOTTOM_RIGHT->value,
        'showCloseIcon' => false,
        'showProgress' => false,
        'timeout' => 3000
    ],
];
Code highlighting powered by Torchlight