Interactive Demo
Click the buttons below to see Toastify Pro in action
Configuration
Toast Types
Advanced Features
đŽ Interactive Playground
Click any card below to try it instantly
Basic Toasts
Simple notifications in 6 beautiful themes
7 Positions
Show toasts anywhere on screen
Popular
Confirmation
Ask users before important actions
toast.conf('Delete?', callback);
New
Input Prompt
Collect user input with validation
toast.input('Your name?', callback);
Action Button
Add clickable actions to toasts
action: { label: 'Update', onClick: ... }
Custom Colors
Create beautiful gradient toasts
primaryColor: '#6366f1', secondaryColor: '...'
0
KB Minified
0
Dependencies
0
Positions
0
Themes
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'
});