Basic Usage

Learn the fundamental patterns for using vibe-toast in your React applications. All examples below are interactive – click the buttons to see real toasts in action!

📋 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',
});

⏱️ Custom Duration

Control how long toasts stay visible:

// Short duration (1.5 seconds)
toast.success('Quick message', { duration: 1500 });

// Long duration (8 seconds)
toast.info('Important notice', { duration: 8000 });

// Persistent (won't auto-dismiss)
toast.warning('Click to dismiss', { duration: 0 });

🔄 Updating Toasts

You can update an existing toast using its ID:

const id = toast.loading('Downloading...');

setTimeout(() => {
  toast.update(id, {
    variant: 'success',
    title: 'Download complete!',
    description: 'Your file is ready.',
  });
}, 2000);

🗑️ Dismissing Toasts

Manually dismiss toasts programmatically:

// Dismiss a specific toast
const id = toast('Hello');
toast.dismiss(id);

// Dismiss all toasts
toast.dismissAll();

🧪 Try All Examples

Here's a playground with all basic toast types in one place:

Toast Playground