PHPackages                             a89s/gooey-toast - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Mail & Notifications](/categories/mail)
4. /
5. a89s/gooey-toast

ActiveLibrary[Mail & Notifications](/categories/mail)

a89s/gooey-toast
================

A gooey expandable toast notification component for Laravel, Livewire

1.0.0(2mo ago)21MITBladePHP ^8.1

Since Feb 20Pushed 2mo agoCompare

[ Source](https://github.com/a89s/gooey-toast)[ Packagist](https://packagist.org/packages/a89s/gooey-toast)[ RSS](/packages/a89s-gooey-toast/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (3)Versions (2)Used By (0)

Gooey Toast
===========

[](#gooey-toast)

> ⚠️ **Work in progress** — This package is under active development and not production-ready yet. APIs may change. Use at your own risk.

> Inspiration for this package was taken from - [anl331](https://github.com/anl331/goey-toast)

A gooey expandable toast notification component for Laravel 10 / 11 / 12.

Features a unique SVG gooey blob animation, expandable detail rows, action buttons with icons and colors, promise toasts, progress toasts, undo countdown, persistent toasts, custom colors, message text blocks, vibration, action confirmation, animated timer bars, dark/light theming, and per-type entrance animations. Zero external CSS dependencies — works with any stack.

Screenshots
-----------

[](#screenshots)

Screenshot 1 - [Click here](.github/screenshots/1.png)
Screenshot 2 - [Click here](.github/screenshots/2.png)
Screenshot 3 - [Click here](.github/screenshots/3.png)
Screenshot 4 - [Click here](.github/screenshots/4.png)
Screenshot 5 - [Click here](.github/screenshots/5.png)
Screenshot 6 - [Click here](.github/screenshots/6.png)

Installation
------------

[](#installation)

```
composer require a89s/gooey-toast
```

The package auto-discovers its service provider. No manual registration needed.

Publish the config (optional):

```
php artisan vendor:publish --tag=gooey-toast-config
```

Publishing Views
----------------

[](#publishing-views)

To customize the component markup:

```
php artisan vendor:publish --tag=gooey-toast-views
```

Views will be published to `resources/views/vendor/gooey-toast/`.

Setup
-----

[](#setup)

Add the component to your layout, just before ``:

```

```

The component requires [Alpine.js](https://alpinejs.dev) (already included if you use Livewire). For non-Livewire projects, include Alpine yourself:

```

```

### Advanced Placement

[](#advanced-placement)

If you need styles in `` and scripts before `` separately, use the Blade directives instead of the component:

```

    @gooeyToastStyles

    ...
    @gooeyToastScripts

```

Usage
-----

[](#usage)

### JavaScript

[](#javascript)

```
// Simple
toast({ type: 'success', title: 'Saved!' });

// With details and footer
toast({
    type: 'error',
    title: 'Upload failed',
    details: [
        { label: 'File', value: 'report.pdf' },
        { label: 'Error', value: 'File too large' },
    ],
    footer: 'Max file size: 10 MB',
});
```

### Livewire

[](#livewire)

```
$this->dispatch('toast', [
    'type'    => 'success',
    'title'   => 'Deployment complete',
    'details' => [
        ['label' => 'Environment', 'value' => 'Production'],
        ['label' => 'Branch',      'value' => 'main'],
    ],
    'footer' => 'https://deploy.example.com/logs/3f8a2c1',
]);
```

PHP API (No Livewire Required)
------------------------------

[](#php-api-no-livewire-required)

Use the `GooeyToast` facade to trigger toasts directly from PHP code. Works with any Laravel project, no Livewire needed:

```
use A89s\GooeyToast\Facades\GooeyToast;

// Quick toasts
GooeyToast::success('Saved!');
GooeyToast::error('Something went wrong');
GooeyToast::warning('Warning message');
GooeyToast::info('Information');

// Fluent builder
GooeyToast::make('Title', 'success')
    ->message('Additional message')
    ->send();

// With avatar
GooeyToast::make('New message', 'info')
    ->avatar('/avatars/user.jpg')
    ->avatarSize('32px')
    ->send();

// Full configuration
GooeyToast::make('Deployment complete', 'success')
    ->details([
        ['label' => 'Environment', 'value' => 'Production'],
        ['label' => 'Branch', 'value' => 'main'],
    ])
    ->footer('https://deploy.example.com/logs/123')
    ->duration(5000)
    ->send();
```

### Available Methods

[](#available-methods)

MethodDescription`make($title, $type)`Create a new toast`success($title, $message)`Quick success toast`error($title, $message)`Quick error toast`warning($title, $message)`Quick warning toast`info($title, $message)`Quick info toast### Builder Methods

[](#builder-methods)

MethodDescription`title($title)`Set toast title`type($type)`Set toast type`message($message)`Set message text block`details($array)`Set detail rows`detail($label, $value)`Add a detail row`footer($text)`Set footer text`actions($array)`Set action buttons`action($label, $event, $icon, $color, $confirm)`Add an action button`vibrate($pattern)`Enable vibration (mobile)`duration($ms)`Set duration`persistent()`Make persistent`color($color)`Set custom color`avatar($url)`Set avatar image`avatarSize($size)`Set avatar size`id($id)`Set toast ID`send()`Send the toastToast Types
-----------

[](#toast-types)

TypeColorEntrance`success`GreenSmooth slide-up`error`RedSlide-up + shake`warning`AmberSlide-up + bounce`info`BlueSmooth slide-up`loading`GraySmooth slide-up (spinner icon)Progress Toasts
---------------

[](#progress-toasts)

Show a progress bar that updates as work completes:

```
// Create a progress toast — returns an ID
const id = toast.progress('Uploading photos...');

// Update progress (0 to 1)
toast.progress(id, 0.25);
toast.progress(id, 0.5);
toast.progress(id, 0.75);

// Complete — auto-switches to success type
toast.progress(id, 1, 'Upload complete!');
```

With options:

```
const id = toast.progress('Processing...', { type: 'warning', color: '#8b5cf6' });
```

### Livewire

[](#livewire-1)

```
// Start
$this->dispatch('toast', [
    'id'       => 'upload-1',
    'type'     => 'info',
    'title'    => 'Uploading...',
    'progress' => 0,
]);

// Update
$this->dispatch('toast-update', [
    'id'       => 'upload-1',
    'progress' => 0.5,
]);

// Complete
$this->dispatch('toast-update', [
    'id'       => 'upload-1',
    'progress' => 1,
    'type'     => 'success',
    'title'    => 'Uploaded!',
]);
```

Undo Toasts
-----------

[](#undo-toasts)

Show a toast with an inline undo button and countdown. If the user doesn't click undo, a confirm event fires when the countdown expires.

```
toast.undo('Message deleted', 'confirm-delete', { id: 123 });

// Listen — only fires if NOT undone
window.addEventListener('confirm-delete', (e) => {
    fetch(`/api/messages/${e.detail.id}`, { method: 'DELETE' });
});
```

With more options:

```
toast.undo({
    title: 'Item archived',
    event: 'confirm-archive',      // fires on countdown expiry
    undoEvent: 'undo-archive',     // fires if user clicks undo (optional)
    data: { id: 456 },
    duration: 8000,                // countdown length in ms
    type: 'info',                  // toast type (default: warning)
});
```

### Livewire

[](#livewire-2)

```
$this->dispatch('toast-undo', [
    'title'    => 'Item deleted',
    'event'    => 'confirm-delete',
    'data'     => ['id' => $id],
    'duration' => 5000,
]);
```

Persistent Toasts
-----------------

[](#persistent-toasts)

Toasts that never auto-dismiss. Only removed by the close button, an action button, or swipe.

```
toast({ type: 'error', title: 'Connection lost', persistent: true });
```

### Livewire

[](#livewire-3)

```
$this->dispatch('toast', [
    'type'       => 'error',
    'title'      => 'Payment failed',
    'persistent' => true,
    'details'    => [
        ['label' => 'Reason', 'value' => 'Card declined'],
    ],
]);
```

Custom Colors
-------------

[](#custom-colors)

Override the type color for any toast. Applies to the icon, title, timer bars, and progress bar.

```
toast({ type: 'success', title: 'VIP Access Granted', color: '#8b5cf6' });
```

Works with all toast types:

```
toast.undo('Archived', 'confirm-archive', { id: 1 });
toast.progress('Syncing...', { color: '#ec4899' });
toast({ type: 'info', title: 'Custom', color: '#06b6d4', persistent: true });
```

### Livewire

[](#livewire-4)

```
$this->dispatch('toast', [
    'type'  => 'success',
    'title' => 'Branded notification',
    'color' => '#8b5cf6',
]);
```

Message Text
------------

[](#message-text)

Display a plain text message block in the expanded body. Unlike `details` (key-value rows), `message` renders as a natural paragraph — ideal for chat notifications, alerts, or any freeform content.

```
toast({
    type: 'info',
    title: 'Melissa',
    avatar: '/avatars/melissa.jpg',
    message: 'Please visit HR when you get a chance 👋',
    footer: '1h ago',
});
```

### Livewire

[](#livewire-5)

```
$this->dispatch('toast', [
    'type'    => 'info',
    'title'   => 'Melissa',
    'avatar'  => '/avatars/melissa.jpg',
    'message' => 'Please visit HR when you get a chance 👋',
    'footer'  => '1h ago',
]);
```

### PHP API

[](#php-api)

```
GooeyToast::make('Melissa', 'info')
    ->avatar('/avatars/melissa.jpg')
    ->message('Please visit HR when you get a chance 👋')
    ->footer('1h ago')
    ->send();
```

Action Buttons
--------------

[](#action-buttons)

Add clickable buttons to the expanded toast body. Each button dispatches a custom window event and dismisses the toast. When there are 2+ buttons they display side by side; a single button stays full width.

```
toast({
    type: 'success',
    title: 'Message sent',
    actions: [
        { label: 'Undo', icon: 'undo', event: 'undo-send' },
        { label: 'View', icon: 'external-link', event: 'view-message', data: { id: 123 } },
    ],
});

// Listen for the event
window.addEventListener('view-message', (e) => {
    console.log(e.detail); // { id: 123 }
});
```

### Action Button Colors

[](#action-button-colors)

Give individual action buttons a custom color. The button gets a tinted background and colored text.

```
toast({
    type: 'info',
    title: 'Incoming call',
    persistent: true,
    actions: [
        { label: 'Accept', icon: 'check', event: 'accept', color: '#22c55e' },
        { label: 'Decline', icon: 'x', event: 'decline', color: '#ef4444' },
    ],
});
```

### Action Confirmation

[](#action-confirmation)

Add `confirm: true` to an action to require a two-step click. The first click changes the label to "Sure?" for 3 seconds. If clicked again, the event fires. If not, the label reverts.

```
toast({
    type: 'warning',
    title: 'Delete account',
    actions: [
        { label: 'Delete', icon: 'trash', event: 'delete-account', color: '#ef4444', confirm: true },
    ],
});
```

### Available Icons

[](#available-icons)

`external-link`, `eye`, `undo`, `retry`, `reply`, `map-pin`, `download`, `copy`, `trash`, `check`, `x`, `image`

You can also register custom icons:

```
toast.registerIcon('star', '...');

// Use in toasts
toast({ type: 'success', title: 'Favorited!', icon: 'star' });
```

Promise Toasts
--------------

[](#promise-toasts)

Show a loading spinner that resolves to success or error automatically:

```
toast.promise(fetch('/api/save'), {
    loading: 'Saving...',
    success: 'Saved!',
    error: 'Failed to save',
});
```

Returns the original promise so you can chain `.then()`.

Updating Toasts
---------------

[](#updating-toasts)

Update any toast by ID:

```
toast.update('my-toast', { title: 'New title', type: 'success' });
```

### Livewire

[](#livewire-6)

```
$this->dispatch('toast-update', [
    'id'    => 'my-toast',
    'title' => 'Updated!',
    'type'  => 'success',
]);
```

Theme Switching
---------------

[](#theme-switching)

The component supports `dark` and `light` themes. Set the default in config, or switch at runtime:

```
toast.theme('light');
toast.theme('dark');
```

Configuration
-------------

[](#configuration)

```
// config/gooey-toast.php
return [
    'position'   => 'bottom-center', // bottom-center, bottom-right, top-center, top-right
    'duration'   => 5000,            // auto-dismiss ms (0 = never)
    'max_toasts' => 5,
    'theme'      => 'dark',          // dark, light
];
```

User Avatars
------------

[](#user-avatars)

Display a user avatar image instead of the default type icon:

```
toast({
    title: 'New message from John',
    avatar: '/avatars/john.jpg',
    type: 'info'
});
```

### Custom Avatar Size

[](#custom-avatar-size)

Override the default size (18px) with any CSS unit:

```
toast({
    title: 'Welcome back!',
    avatar: '/avatars/user.png',
    avatarSize: '32px',
    type: 'success'
});
```

Vibration
---------

[](#vibration)

Trigger a device vibration (mobile only) when a toast appears. Uses the [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API) — silently ignored on desktop browsers.

```
// Simple vibration (200ms)
toast({ type: 'info', title: 'Alert!', vibrate: true });

// Custom pattern (vibrate, pause, vibrate)
toast({ type: 'info', title: 'Incoming call', vibrate: [200, 100, 200] });
```

### PHP API

[](#php-api-1)

```
GooeyToast::make('Incoming call', 'info')
    ->vibrate([200, 100, 200])
    ->send();
```

Full Options Reference
----------------------

[](#full-options-reference)

```
toast({
    type: 'success',             // success, error, warning, info, loading
    title: 'Notification',       // required
    id: 'my-id',                 // optional — use for updates
    message: 'Text block',      // optional — plain text message
    avatar: '/path/to/image.jpg', // optional — avatar image URL
    avatarSize: '32px',         // optional — avatar size (default: 18px)
    details: [                   // optional — expandable rows
        { label: 'Key', value: 'Value' },
    ],
    footer: 'Footer text',      // optional
    actions: [                   // optional — buttons in expanded body
        { label: 'Click me', icon: 'check', event: 'my-event', data: {}, color: '#22c55e', confirm: false },
    ],
    duration: 5000,              // optional — override config duration
    persistent: false,           // optional — never auto-dismiss
    color: '#8b5cf6',            // optional — override type color
    progress: 0.5,              // optional — show progress bar (0 to 1)
    icon: 'star',                // optional — override type icon (registered name)
    vibrate: true,               // optional — vibrate on mobile (true or [ms] pattern)
});
```

License
-------

[](#license)

MIT — see [LICENSE](LICENSE).

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance83

Actively maintained with recent releases

Popularity4

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity42

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

88d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/8aafaa6adb449137946d04b7b6bc5414705c89566ee52bb6dbe4c8fb57835afe?d=identicon)[a89s](/maintainers/a89s)

---

Top Contributors

[![a89s](https://avatars.githubusercontent.com/u/84576933?v=4)](https://github.com/a89s "a89s (10 commits)")

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/a89s-gooey-toast/health.svg)

```
[![Health](https://phpackages.com/badges/a89s-gooey-toast/health.svg)](https://phpackages.com/packages/a89s-gooey-toast)
```

###  Alternatives

[mckenziearts/laravel-notify

Flexible flash notifications for Laravel

1.7k1.1M5](/packages/mckenziearts-laravel-notify)[s-ichikawa/laravel-sendgrid-driver

This library adds a 'sendgrid' mail driver to Laravel.

4139.3M1](/packages/s-ichikawa-laravel-sendgrid-driver)[laravel-notification-channels/apn

Apple APN Push Notification Channel

2021.9M4](/packages/laravel-notification-channels-apn)[laravel-notification-channels/microsoft-teams

A Laravel Notification Channel for Microsoft Teams

1603.0M7](/packages/laravel-notification-channels-microsoft-teams)[laravel-notification-channels/discord

Laravel notification driver for Discord.

2371.3M11](/packages/laravel-notification-channels-discord)[illuminate/mail

The Illuminate Mail package.

5910.1M391](/packages/illuminate-mail)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)