AmjadShakhshir

Toast Notifications Demo

Elegant, customizable notification system with multiple types, positions, and interactive features

Toast Controls

Position

Basic Notifications

Interactive Notifications

Bulk Actions

Features

Smooth Animations

Powered by Framer Motion for fluid entrance and exit animations

Interactive Actions

Add custom buttons and actions to notifications

Multiple Positions

6 different positioning options to fit your design

Auto-dismiss

Configurable auto-close timing with manual override

Usage Example

// Basic usage
addToast({
  type: 'success',
  title: 'Success!',
  message: 'Your action was completed successfully.',
  duration: 5000
});

// With custom action
addToast({
  type: 'info',
  title: 'New Message',
  message: 'You have a new message from John.',
  action: {
    label: 'View',
    onClick: () => navigate('/messages')
  },
  duration: 0 // Persistent
});