Variants

Explore different toast styles

📋 Basic Toast

The simplest way to display a toast is with the default toast() function:

import { toast } from 'vibe-toast';

toast('Hello, world!');

✅ Success Toasts

Use toast.success() for positive feedback and completion messages:

toast.success('Operation completed successfully!');
toast.success('Profile updated', {
  description: 'Your changes have been saved.',
});

❌ Error Toasts

Use toast.error() for failures and critical issues:

toast.error('Something went wrong!');
toast.error('Upload failed', {
  description: 'File size exceeds 10MB limit.',
});

⚠ī¸ Warning Toasts

Use toast.warning() for cautions and approaching limits:

toast.warning('Your session will expire soon');
toast.warning('Low disk space', {
  description: 'Only 500MB remaining.',
});

ℹī¸ Info Toasts

Use toast.info() for general information and updates:

toast.info('New update available');
toast.info('Weekly report ready', {
  description: 'Click to download.',
});

📝 Toast with Title and Description

Use the object API for more structured notifications:

toast({
  title: 'Welcome back!',
  description: 'You have 3 new messages.',
  variant: 'success',
});