Skip to main content
This guide will get you up and running with Gooey Toast in under 5 minutes. You’ll learn how to trigger toasts using JavaScript, Livewire, and the PHP API.
Make sure you’ve completed the installation before following this guide.

​
Your first toast

The simplest way to show a toast is using the toast() function in JavaScript: 
toast({ type: 'success', title: 'Hello, Gooey Toast!' });
You can test this in your browser’s developer console on any page that includes the Gooey Toast component.

​
Toast from a button click

Let’s create a button that triggers a toast when clicked:
welcome.blade.php
<button
  onclick="toast({ type: 'info', title: 'Button clicked!' })"
  class="px-4 py-2 bg-blue-500 text-white rounded"
>
  Click me
</button>
When clicked, you’ll see a blue info toast appear at the bottom of the screen.

​
Add details and footer

Toasts can expand to show additional information. Click the toast or the chevron icon to expand: 
toast({
  type: 'success',
  title: 'Upload complete',
  details: [
    { label: 'File', value: 'report.pdf' },
    { label: 'Size', value: '2.4 MB' },
    { label: 'Duration', value: '3.2s' },
  ],
  footer: 'Uploaded to /documents/',
});
1

Toast appears collapsed

Initially shows only the title with an icon and chevron
2

User clicks to expand

The toast smoothly expands with a gooey animation
3

Details are revealed

Shows key-value rows and footer text in the expanded body

​
Use different toast types

Gooey Toast includes five built-in types, each with unique colors and animations: 
toast({
  type: 'success',
  title: 'Changes saved',
});

​
Trigger toasts from Livewire

If you’re using Livewire, dispatch toasts from your components:
app/Livewire/UserProfile.php
namespace App\Livewire;

use Livewire\Component;

class UserProfile extends Component
{
    public function save()
    {
        // Save user data...

        $this->dispatch('toast', [
            'type'  => 'success',
            'title' => 'Profile updated',
        ]);
    }
}
With details: 
$this->dispatch('toast', [
    'type'    => 'success',
    'title'   => 'Deployment complete',
    'details' => [
        ['label' => 'Environment', 'value' => 'Production'],
        ['label' => 'Branch',      'value' => 'main'],
        ['label' => 'Commit',      'value' => 'a3f8b2c'],
    ],
    'footer' => 'Deployed at ' . now()->format('H:i:s'),
]);

​
Use the PHP API (no Livewire required)

You can trigger toasts directly from any PHP code using the GooeyToast facade:
1

Import the facade

use A89s\GooeyToast\Facades\GooeyToast;
2

Trigger quick toasts

Use convenience methods for common types:
GooeyToast::success('Changes saved!');
GooeyToast::error('Something went wrong');
GooeyToast::warning('Warning message');
GooeyToast::info('Information');
3

Build complex toasts

Use the fluent builder for advanced features:
GooeyToast::make('Upload complete', 'success')
    ->details([
        ['label' => 'File', 'value' => 'report.pdf'],
        ['label' => 'Size', 'value' => '2.4 MB'],
    ])
    ->footer('Uploaded to /documents/')
    ->duration(8000)
    ->send();
PHP API toasts are stored in the session and displayed on the next page load. For real-time toasts, use JavaScript or Livewire.

​
Complete example: Form submission

Here’s a complete example showing a Livewire form that displays different toasts based on validation results:
app/Livewire/ContactForm.php
namespace App\Livewire;

use Livewire\Component;

class ContactForm extends Component
{
    public $name = '';
    public $email = '';
    public $message = '';

    public function submit()
    {
        $validated = $this->validate([
            'name'    => 'required|min:2',
            'email'   => 'required|email',
            'message' => 'required|min:10',
        ]);

        try {
            // Send the message...
            
            $this->dispatch('toast', [
                'type'    => 'success',
                'title'   => 'Message sent!',
                'details' => [
                    ['label' => 'To', 'value' => '[email protected]'],
                    ['label' => 'From', 'value' => $this->email],
                ],
                'footer' => 'We\'ll respond within 24 hours',
            ]);

            $this->reset();
        } catch (\Exception $e) {
            $this->dispatch('toast', [
                'type'    => 'error',
                'title'   => 'Failed to send message',
                'details' => [
                    ['label' => 'Error', 'value' => $e->getMessage()],
                ],
                'footer' => 'Please try again',
            ]);
        }
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}
resources/views/livewire/contact-form.blade.php
<form wire:submit="submit" class="space-y-4">
    <div>
        <label for="name">Name</label>
        <input wire:model="name" type="text" id="name" />
        @error('name') <span class="text-red-500">{{ $message }}</span> @enderror
    </div>

    <div>
        <label for="email">Email</label>
        <input wire:model="email" type="email" id="email" />
        @error('email') <span class="text-red-500">{{ $message }}</span> @enderror
    </div>

    <div>
        <label for="message">Message</label>
        <textarea wire:model="message" id="message" rows="4"></textarea>
        @error('message') <span class="text-red-500">{{ $message }}</span> @enderror
    </div>

    <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded">
        Send Message
    </button>
</form>

​
Try advanced features

Now that you understand the basics, explore these powerful features:

Action buttons

Add clickable buttons with custom icons and colors

Progress toasts

Show real-time progress bars for long-running tasks

Undo functionality

Let users undo actions with countdown timers

Promise toasts

Automatically handle async operations

​
Common patterns

Here are some quick recipes for common use cases: 
toast({
  type: 'error',
  title: 'Connection lost',
  persistent: true,
});

toast({
  type: 'info',
  title: 'New message from Sarah',
  message: 'Can you review the Q4 report when you have a chance?',
  footer: '2 minutes ago',
});

toast({
  type: 'success',
  title: 'Item saved',
  duration: 3000, // 3 seconds
});

toast({
  type: 'success',
  title: 'VIP access granted',
  color: '#8b5cf6', // Purple
});

toast({
  type: 'info',
  title: 'Sarah Johnson',
  avatar: '/avatars/sarah.jpg',
  avatarSize: '32px',
  message: 'Can you review the Q4 report?',
});

​
Next steps

Explore all features

Dive deeper into action buttons, progress tracking, undo functionality, and more

Build docs developers (and LLMs) love

Get started for freeTalk to us