Persistent toasts remain visible until explicitly dismissed by the user. They’re perfect for critical notifications, connection errors, or important messages that require acknowledgment.
How it works
By default, toasts auto-dismiss after the configured duration. Persistent toasts override this behavior and stay on screen until:
- The user clicks the close button
- The user swipes to dismiss
- An action button is clicked
- The toast is programmatically removed
Basic usage
JavaScript
Livewire
PHP Facade
toast({
type: 'error',
title: 'Connection lost',
persistent: true
});
$this->dispatch('toast', [
'type' => 'error',
'title' => 'Connection lost',
'persistent' => true,
]);
use A89s\GooeyToast\Facades\GooeyToast;
GooeyToast::make('Connection lost', 'error')
->persistent()
->send();
Common use cases
Critical errors
Use persistent toasts for errors that require immediate attention:
toast({
type: 'error',
title: 'Payment failed',
persistent: true,
details: [
{ label: 'Reason', value: 'Card declined' },
{ label: 'Amount', value: '$49.99' },
],
actions: [
{ label: 'Update payment', icon: 'external-link', event: 'update-payment' },
],
});
System alerts
Display system-wide notifications that shouldn’t disappear automatically:
use A89s\GooeyToast\Facades\GooeyToast;
GooeyToast::make('Maintenance scheduled', 'warning')
->message('The system will be down for maintenance on Sunday at 2 AM EST.')
->persistent()
->send();
Incoming calls or messages
Create persistent toasts with action buttons for real-time events:
toast({
type: 'info',
title: 'Incoming call',
message: 'John is calling you',
persistent: true,
actions: [
{ label: 'Accept', icon: 'check', event: 'accept', color: '#22c55e' },
{ label: 'Decline', icon: 'x', event: 'decline', color: '#ef4444' },
],
});
Persistent toasts don’t display a timer bar since they never auto-dismiss.
Combining with other features
Persistent + custom colors
toast({
type: 'info',
title: 'VIP notification',
color: '#8b5cf6',
persistent: true
});
Persistent + avatar
toast({
title: 'New message from Melissa',
avatar: '/avatars/melissa.jpg',
avatarSize: '32px',
message: 'Please visit HR when you get a chance 👋',
persistent: true,
type: 'info',
});
Persistent + vibration
toast({
type: 'warning',
title: 'Security alert',
message: 'New login detected from unknown device',
persistent: true,
vibrate: [200, 100, 200],
});
Best practices
Use persistent toasts sparingly. Too many persistent notifications can overwhelm users and clutter the interface.
- Critical errors that require user action
- Connection failures or offline states
- Incoming calls, messages, or real-time alerts
- Important system announcements
- Confirmation dialogs with action buttons
When NOT to use persistent toasts:
- Success confirmations (“Saved!”, “Updated!”)
- Progress updates
- Informational messages
- Non-critical warnings
Removing persistent toasts
You can programmatically dismiss a persistent toast by updating it:
// Create with an ID
toast({
id: 'connection-error',
type: 'error',
title: 'Connection lost',
persistent: true
});
// Later, when connection is restored
toast.update('connection-error', {
type: 'success',
title: 'Connected',
persistent: false,
duration: 3000
});
Related features