Interactive Demo
Click the buttons below to see Toastify Pro in action
Configuration
Toast Types
Advanced Features
Installation
Get started in seconds
Terminal
npm install toastify-pro
JavaScript
import ToastifyPro from 'toastify-pro';
const toast = new ToastifyPro();
toast.success('Hello World!');
HTML
<script src="https://cdn.jsdelivr.net/npm/toastify-pro/dist/toastify-pro.umd.min.js"></script>
<script>
const toast = new ToastifyPro();
toast.success('Hello World!');
</script>
JavaScript
import ToastifyPro from 'https://cdn.jsdelivr.net/npm/toastify-pro/dist/toastify-pro.esm.js';
const toast = new ToastifyPro();
toast.success('Hello World!');API Reference
Complete list of methods and options
Constructor Options
| Option | Type | Default | Description |
|---|---|---|---|
position |
string | 'bottom-center' |
Toast position. Options: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right, center |
timeout |
number | 3000 |
Auto-dismiss timeout in ms. Set to 0 to disable |
allowClose |
boolean | true |
Show close button |
pauseOnHover |
boolean | true |
Pause timeout when hovering |
maxToasts |
number | 0 |
Max visible toasts. 0 for unlimited |
newestOnTop |
boolean | true |
Show newest toasts on top |
Methods
| Method | Description |
|---|---|
success(message, options?) |
Show success toast |
error(message, options?) |
Show error toast |
warning(message, options?) |
Show warning toast |
info(message, options?) |
Show info toast |
dark(message, options?) |
Show dark theme toast |
light(message, options?) |
Show light theme toast |
custom(message, options?) |
Show toast with custom colors |
conf(message, options?, callback?) |
Show confirmation dialog |
input(message, options?, callback?) |
Show input prompt |
dismissAll(type?) |
Dismiss all toasts, optionally by type |
Examples
Common usage patterns
Basic Usage
JavaScript
const toast = new ToastifyPro({ position: 'top-right' });
// Simple messages
toast.success('Profile updated!');
toast.error('Something went wrong');
toast.warning('Please save your work');
toast.info('New message received');
// With description
toast.success('File uploaded', { description: 'document.pdf was uploaded successfully' });Confirmation Dialog
JavaScript
// Simple confirmation
toast.conf('Delete this item?', (confirmed) => {
if (confirmed) {
toast.success('Item deleted');
}
});
// With async loading
toast.conf('Submit form?', {
description: 'This action cannot be undone',
confirmText: 'Submit',
onConfirm: async () => {
await fetch('/api/submit', { method: 'POST' });
toast.success('Submitted!');
}
});Input Prompt
JavaScript
// Simple input
toast.input('What is your name?', (value) => {
toast.success(`Hello, ${value}!`);
});
// With validation
toast.input('Enter your email', {
type: 'email',
placeholder: 'you@example.com',
validate: (val) => val.includes('@') || 'Invalid email',
onSubmit: async (email) => {
await subscribe(email);
toast.success('Subscribed!');
}
});Custom Colors
JavaScript
// Custom gradient toast
toast.custom('Custom styled!', {
primaryColor: '#8b5cf6',
secondaryColor: '#6366f1'
});
// Custom confirmation
toast.conf('Continue?', {
primaryColor: '#f97316',
secondaryColor: '#ea580c',
confirmText: 'Yes, continue'
});