Toastify Pro

Modern, lightweight toast notifications for JavaScript

Demo · Documentation

Features

• Lightweight — ~2KB minified, zero dependencies
• 6 Themes — Success, error, warning, info, dark, light
• 7 Positions — All corners, centers, and center
• Confirmations — Interactive dialogs with async support
• Input Prompts — Text input with validation
• Glassmorphism — Modern blur effects
• Accessible — ARIA support, keyboard navigation
• Framework Agnostic — Works everywhere

Installation

npm install toastify-pro

Or use CDN:

<script src="https://cdn.jsdelivr.net/npm/toastify-pro/dist/toastify-pro.umd.min.js"></script>

Quick Start

import ToastifyPro from 'toastify-pro';

const toast = new ToastifyPro();

// Basic toasts
toast.success('Saved successfully!');
toast.error('Something went wrong');
toast.warning('Please check your input');
toast.info('New update available');

// With description
toast.success('File uploaded', { description: 'document.pdf is ready' });

Confirmation Dialogs

// Simple
toast.conf('Delete this item?', (confirmed) => {
  if (confirmed) toast.success('Deleted!');
});

// With options
toast.conf('Save changes?', {
  description: 'This cannot be undone',
  confirmText: 'Save',
  cancelText: 'Discard',
  theme: 'light'
}, (confirmed) => {
  if (confirmed) saveData();
});

// Async loading
toast.conf('Submit form?', {
  onConfirm: async ({ setLoading, close }) => {
    setLoading(true);
    await fetch('/api/submit', { method: 'POST' });
    close();
    toast.success('Submitted!');
  }
});

Input Prompts

// Simple
toast.input('What is your name?', (value) => {
  toast.success(`Hello, ${value}!`);
});

// With validation
toast.input('Enter email', {
  type: 'email',
  placeholder: '[email protected]',
  validate: (val) => val.includes('@') || 'Invalid email',
  onSubmit: async (email) => {
    await subscribe(email);
    toast.success('Subscribed!');
  }
});

Custom Colors

// Gradient toast
toast.custom('Custom styled!', {
  primaryColor: '#8b5cf6',
  secondaryColor: '#6366f1'
});

// Gradient confirmation
toast.conf('Continue?', {
  primaryColor: '#f97316',
  secondaryColor: '#ea580c'
});

API Reference

Constructor

const toast = new ToastifyPro({
  position: 'bottom-center',  // Position on screen
  timeout: 3000,              // Auto-dismiss (0 to disable)
  allowClose: true,           // Show close button
  pauseOnHover: true,         // Pause timeout on hover
  maxToasts: 0,               // Max visible (0 = unlimited)
  newestOnTop: true           // Stack order
});

Positions

top-left · top-center · top-right · bottom-left · bottom-center · bottom-right · center

Methods

| Method | Description | |--------|-------------| | success(msg, opts?) | Green success toast | | error(msg, opts?) | Red error toast | | warning(msg, opts?) | Orange warning toast | | info(msg, opts?) | Blue info toast | | dark(msg, opts?) | Dark theme toast | | light(msg, opts?) | Light theme toast | | custom(msg, opts?) | Custom colors | | conf(msg, opts?, cb?) | Confirmation dialog | | input(msg, opts?, cb?) | Input prompt | | dismissAll(type?) | Dismiss all toasts |

Toast Options

{
  description: 'Secondary text',
  timeout: 5000,
  allowClose: true,
  action: {
    label: 'Undo',
    onClick: ({ close }) => { /* ... */ }
  }
}

Confirmation Options

{
  description: 'Details text',
  confirmText: 'Confirm',
  cancelText: 'Cancel',
  theme: 'dark',           // 'dark' | 'light'
  position: 'center',
  primaryColor: '#6366f1', // Custom gradient
  secondaryColor: '#8b5cf6',
  onConfirm: (helpers) => {},
  onCancel: () => {}
}

Input Options

{
  description: 'Help text',
  placeholder: 'Enter value...',
  submitText: 'Submit',
  cancelText: 'Cancel',
  type: 'text',            // 'text' | 'email' | 'password' | 'number' | 'url'
  defaultValue: '',
  required: true,
  validate: (val) => true, // Return true or error string
  theme: 'dark',
  primaryColor: '#6366f1',
  onSubmit: (value, helpers) => {},
  onCancel: () => {}
}

Browser Support

Chrome, Firefox, Safari, Edge (all modern versions)

License

MIT © Abhishek Potter