Gooey Toast provides five distinct toast types, each with its own color scheme and entrance animation to match the message context.
Overview
Each toast type is designed for a specific purpose:
- Success - Confirm successful operations
- Error - Alert users to failures or problems
- Warning - Display cautionary messages
- Info - Show general information
- Loading - Indicate ongoing processes
Success toasts
Use success toasts to confirm that an operation completed successfully.
JavaScript
Livewire
PHP API
toast({ type: 'success', title: 'Saved!' });
$this->dispatch('toast', [
'type' => 'success',
'title' => 'Saved!',
]);
use A89s\GooeyToast\Facades\GooeyToast;
GooeyToast::success('Saved!');
// With message
GooeyToast::success('Saved!', 'Your changes have been saved.');
Success toasts use a green color scheme and feature a smooth slide-up entrance animation.
With details
toast({
type: 'success',
title: 'Deployment complete',
details: [
{ label: 'Environment', value: 'Production' },
{ label: 'Branch', value: 'main' },
],
footer: 'https://deploy.example.com/logs/3f8a2c1',
});
Error toasts
Use error toasts to notify users of failures or critical issues.
JavaScript
Livewire
PHP API
toast({ type: 'error', title: 'Upload failed' });
$this->dispatch('toast', [
'type' => 'error',
'title' => 'Upload failed',
]);
GooeyToast::error('Upload failed');
// With message
GooeyToast::error('Upload failed', 'The file is too large.');
Error toasts use a red color scheme and feature a slide-up animation combined with a shake effect to grab attention.
With error details
toast({
type: 'error',
title: 'Upload failed',
details: [
{ label: 'File', value: 'report.pdf' },
{ label: 'Error', value: 'File too large' },
],
footer: 'Max file size: 10 MB',
});
Warning toasts
Use warning toasts to display cautionary messages or important notices.
JavaScript
Livewire
PHP API
toast({ type: 'warning', title: 'Warning message' });
$this->dispatch('toast', [
'type' => 'warning',
'title' => 'Warning message',
]);
GooeyToast::warning('Warning message');
// With message
GooeyToast::warning('Warning message', 'Please review before continuing.');
Warning toasts use an amber color scheme and feature a slide-up animation with a bounce effect.
Delete confirmation example
toast({
type: 'warning',
title: 'Delete account',
actions: [
{ label: 'Delete', icon: 'trash', event: 'delete-account', color: '#ef4444', confirm: true },
],
});
Info toasts
Use info toasts to display general information or neutral messages.
JavaScript
Livewire
PHP API
toast({ type: 'info', title: 'Information' });
$this->dispatch('toast', [
'type' => 'info',
'title' => 'Information',
]);
GooeyToast::info('Information');
// With message
GooeyToast::info('Information', 'The system will be updated tonight.');
Info toasts use a blue color scheme and feature a smooth slide-up entrance animation.
With avatar and message
toast({
type: 'info',
title: 'Melissa',
avatar: '/avatars/melissa.jpg',
message: 'Please visit HR when you get a chance 👋',
footer: '1h ago',
});
Loading toasts
Use loading toasts to indicate that a process is in progress.
toast({ type: 'loading', title: 'Processing...' });
Loading toasts use a gray color scheme with a spinner icon and feature a smooth slide-up entrance animation.
Promise toasts
Loading toasts are often used with promises that automatically resolve to success or error:
toast.promise(fetch('/api/save'), {
loading: 'Saving...',
success: 'Saved!',
error: 'Failed to save',
});
Type comparison
| Type | Color | Entrance animation | Use case |
|---|
success | Green | Smooth slide-up | Confirm successful operations |
error | Red | Slide-up + shake | Alert users to failures |
warning | Amber | Slide-up + bounce | Display cautionary messages |
info | Blue | Smooth slide-up | Show general information |
loading | Gray | Smooth slide-up | Indicate ongoing processes |
Custom colors
You can override the default type color for any toast:
toast({ type: 'success', title: 'VIP Access Granted', color: '#8b5cf6' });
- Icon color
- Title color
- Timer bars
- Progress bars
Custom colors work with all toast types, including progress toasts and undo toasts.
Examples with custom colors
// Custom success toast
toast({ type: 'success', title: 'Branded notification', color: '#8b5cf6' });
// Custom progress toast
toast.progress('Syncing...', { color: '#ec4899' });
// Custom persistent toast
toast({ type: 'info', title: 'Custom', color: '#06b6d4', persistent: true });