Preview
Open Original
Alert Dialogs
Simple notification modals with a single action button.
Click a button to see the result...
// Simple Alert
Swal.modal({
title: 'Hello!',
text: 'This is a simple alert message.',
icon: 'info',
buttons: { confirm: 'OK' }
});
// Alert with Title
Swal.modal({
title: 'Welcome Back!',
text: 'We missed you. Check out the new features.',
icon: 'success',
buttons: { confirm: 'Explore' }
});
// Rich HTML Alert
Swal.modal({
title: 'Rich Content',
html: `
<div style="text-align: center;">
<img src="https://via.placeholder.com/100" style="border-radius: 50%;">
<p style="margin-top: 1rem;">You can use <strong>HTML</strong> content!</p>
</div>
`,
buttons: { confirm: 'Got it!' }
});
// Auto-Close Alert
Swal.modal({
title: 'Auto-Close',
text: 'This will close in 3 seconds....Alert Dialogs
Simple notification modals with a single action button.
Click a button to see the result...
// Simple Alert
Swal.modal({
title: 'Hello!',
text: 'This is a simple alert message.',
icon: 'info',
buttons: { confirm: 'OK' }
});
// Alert with Title
Swal.modal({
title: 'Welcome Back!',
text: 'We missed you. Check out the new features.',
icon: 'success',
buttons: { confirm: 'Explore' }
});
// Rich HTML Alert
Swal.modal({
title: 'Rich Content',
html: `
<div style="text-align: center;">
<img src="https://via.placeholder.com/100" style="border-radius: 50%;">
<p style="margin-top: 1rem;">You can use <strong>HTML</strong> content!</p>
</div>
`,
buttons: { confirm: 'Got it!' }
});
// Auto-Close Alert
Swal.modal({
title: 'Auto-Close',
text: 'This will close in 3 seconds...',
icon: 'info',
timer: 3000,
showConfirmButton: false,
timerProgressBar: true
});
// Premium Style Alert
Swal.modal({
title: 'Premium Features',
text: 'Experience the next level of UI design.',
icon: 'success',
style: 'neumorphism',
buttons: { confirm: 'Amazing!' }
});
Confirm Dialogs
Two-button dialogs for yes/no decisions with customizable actions.
Click a button to see the result...
// Simple Confirm
const result = await Swal.modal({
title: 'Are you sure?',
text: 'Do you want to continue with this action?',
icon: 'question',
buttons: {
cancel: 'No, cancel',
confirm: 'Yes, continue'
}
});
if (result.confirmed) {
console.log('User confirmed!');
}
// Delete Confirmation
const deleteResult = await Swal.modal({
title: 'Delete Item?',
text: 'This action cannot be undone. All data will be permanently removed.',
icon: 'warning',
buttons: {
cancel: 'Keep it',
confirm: { text: 'Delete', style: 'danger' }
}
});
// Danger Action with Custom Colors
Swal.modal({
title: 'Warning!',
text: 'This is a destructive action.',
icon: 'error',
confirmButtonColor: '#dc2626',
cancelButtonColor: '#6b7280',
buttons: {
cancel: 'Cancel',
confirm: 'Proceed Anyway'
}
});
// Three Button Options
Swal.modal({
title: 'Save Changes?',
text: 'You have unsaved changes.',
icon: 'question',
buttons: {
cancel: "Don't Save",
deny: { text: 'Cancel', style: 'secondary' },
confirm: 'Save'
}
});
Prompt Dialogs
Input dialogs for collecting user data with validation support.
Click a button to see the result...
// Text Input Prompt
const nameResult = await Swal.modal({
title: 'What is your name?',
input: 'text',
inputPlaceholder: 'Enter your name...',
buttons: {
cancel: 'Cancel',
confirm: 'Submit'
}
});
console.log('Name:', nameResult.value);
// Email Input
const emailResult = await Swal.modal({
title: 'Enter your email',
input: 'email',
inputPlaceholder: 'your@email.com',
inputValidator: (value) => {
if (!value.includes('@')) {
return 'Please enter a valid email address';
}
}
});
// Password Input
const passResult = await Swal.modal({
title: 'Enter Password',
input: 'password',
inputPlaceholder: 'Your password...',
inputAttributes: {
minlength: 8,
autocapitalize: 'off',
autocorrect: 'off'
}
});
// With Validation
const validatedResult = await Swal.modal({
title: 'Enter a URL',
input: 'url',
inputPlaceholder: 'https://example.com',
inputValidator: (value) => {
try {
new URL(value);
} catch {
return 'Please enter a valid URL';
}
},
showCancelButton: true
});
Semantic Messages
Timed Messages
Custom Icons
// Success Message
Swal.modal({
icon: 'success',
title: 'Success!',
text: 'Your changes have been saved successfully.',
buttons: { confirm: 'Great!' }
});
// Error Message
Swal.modal({
icon: 'error',
title: 'Oops!',
text: 'Something went wrong. Please try again.',
buttons: { confirm: 'Try Again' }
});
// Warning Message
Swal.modal({
icon: 'warning',
title: 'Warning',
text: 'This action may have consequences.',
buttons: { cancel: 'Cancel', confirm: 'Proceed' }
});
// Info Message
Swal.modal({
icon: 'info',
title: 'Information',
text: 'Here is some helpful information for you.',
buttons: { confirm: 'Got it' }
});
// Question Message
Swal.modal({
icon: 'question',
title: 'Are you sure?',
text: 'Do you want to proceed with this action?',
buttons: { cancel: 'No', confirm: 'Yes' }
});
// Loading State
Swal.modal({
title: 'Loading...',
text: 'Please wait while we process your request.',
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading();
}
});
// Auto-Close Success (with timer)
Swal.modal({
icon: 'success',
title: 'Saved!',
text: 'Auto-closing in 2 seconds...',
timer: 2000,
timerProgressBar: true,
showConfirmButton: false
});
// Custom SVG Icon
Swal.modal({
iconHtml: '<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/></svg>',
title: 'Custom Icon',
text: 'You can use any SVG as an icon!',
iconColor: '#6366f1'
});
// Emoji Icon
Swal.modal({
iconHtml: '🎉',
title: 'Congratulations!',
text: 'You can use emojis as icons too!'
});
Text Inputs
Number & Range
Selection
Date & Time
Rich Inputs
Click a button to see the result...
// Text Input
const text = await Swal.modal({
title: 'Enter Text',
input: 'text',
inputPlaceholder: 'Type something...'
});
// Email Input
const email = await Swal.modal({
title: 'Email Address',
input: 'email',
inputPlaceholder: 'you@example.com'
});
// URL Input
const url = await Swal.modal({
title: 'Website URL',
input: 'url',
inputPlaceholder: 'https://example.com'
});
// Password Input
const password = await Swal.modal({
title: 'Password',
input: 'password',
inputPlaceholder: 'Enter password...'
});
// Number Input
const number = await Swal.modal({
title: 'Enter a Number',
input: 'number',
inputAttributes: { min: 1, max: 100, step: 1 }
});
// Range Slider
const range = await Swal.modal({
title: 'Select a Value',
input: 'range',
inputAttributes: { min: 0, max: 100, step: 5 },
inputValue: 50
});
// Select Dropdown
const select = await Swal.modal({
title: 'Choose an option',
input: 'select',
inputOptions: {
opt1: 'Option 1',
opt2: 'Option 2',
opt3: 'Option 3'
},
inputPlaceholder: 'Select...'
});
// Radio Buttons
const radio = await Swal.modal({
title: 'Choose one',
input: 'radio',
inputOptions: {
red: 'Red',
blue: 'Blue',
green: 'Green'
}
});
// Checkbox
const checkbox = await Swal.modal({
title: 'Terms',
input: 'checkbox',
inputValue: 0,
inputPlaceholder: 'I agree to the terms'
});
// Toggle/Switch
const toggle = await Swal.modal({
title: 'Enable Feature',
input: 'toggle',
inputValue: false
});
// Date Input
const date = await Swal.modal({
title: 'Select Date',
input: 'date'
});
// Time Input
const time = await Swal.modal({
title: 'Select Time',
input: 'time'
});
// DateTime Input
const datetime = await Swal.modal({
title: 'Select Date & Time',
input: 'datetime-local'
});
// Textarea
const textarea = await Swal.modal({
title: 'Enter Description',
input: 'textarea',
inputPlaceholder: 'Type your message here...'
});
// Color Picker
const color = await Swal.modal({
title: 'Pick a Color',
input: 'color',
inputValue: '#6366f1'
});
// File Upload
const file = await Swal.modal({
title: 'Upload File',
input: 'file',
inputAttributes: {
accept: 'image/*',
'aria-label': 'Upload your file'
}
});
// Star Rating
const rating = await Swal.modal({
title: 'Rate Us',
input: 'rating',
inputValue: 3,
inputAttributes: { max: 5 }
});
Authentication Forms
Login Form
Email/password authentication with remember me option
Registration
Full user registration with validation
Password Reset
Forgot password recovery flow
Business Forms
Contact Form
Contact us with subject and message
Feedback Form
Star rating with comments
Payment Form
Credit card with validation
Multi-Step Wizards
Form submission results will appear here...
// Login Form
const loginResult = await Swal.modal({
title: 'Login',
icon: 'user',
form: [
{ type: 'email', name: 'email', label: 'Email', required: true },
{ type: 'password', name: 'password', label: 'Password', required: true },
{ type: 'checkbox', name: 'remember', label: 'Remember me' }
],
buttons: { cancel: 'Cancel', confirm: 'Login' }
});
console.log('Login data:', loginResult.formData);
// Registration Form
const registerResult = await Swal.modal({
title: 'Create Account',
form: [
{ type: 'text', name: 'fullName', label: 'Full Name', required: true },
{ type: 'email', name: 'email', label: 'Email Address', required: true },
{ type: 'password', name: 'password', label: 'Password', required: true },
{ type: 'password', name: 'confirmPassword', label: 'Confirm Password', required: true },
{ type: 'checkbox', name: 'terms', label: 'I agree to Terms & Conditions', required: true }
],
buttons: { cancel: 'Cancel', confirm: 'Register' }
});
// Contact Form
const contactResult = await Swal.modal({
title: 'Contact Us',
icon: 'envelope',
form: [
{ type: 'text', name: 'name', label: 'Your Name', required: true },
{ type: 'email', name: 'email', label: 'Email Address', required: true },
{ type: 'select', name: 'subject', label: 'Subject',
options: ['General Inquiry', 'Support', 'Feedback', 'Other'] },
{ type: 'textarea', name: 'message', label: 'Message', required: true }
],
buttons: { cancel: 'Cancel', confirm: 'Send Message' }
});
// Feedback Form with Rating
const feedbackResult = await Swal.modal({
title: 'Rate Your Experience',
form: [
{ type: 'rating', name: 'rating', label: 'Your Rating', max: 5 },
{ type: 'textarea', name: 'comments', label: 'Comments (optional)' }
],
buttons: { cancel: 'Skip', confirm: 'Submit Feedback' }
});
// Payment Form
const paymentResult = await Swal.modal({
title: 'Payment Details',
icon: 'credit-card',
form: [
{ type: 'text', name: 'cardNumber', label: 'Card Number',
placeholder: '1234 5678 9012 3456', required: true },
{ type: 'text', name: 'cardName', label: 'Name on Card', required: true },
{ type: 'text', name: 'expiry', label: 'Expiry (MM/YY)', required: true },
{ type: 'text', name: 'cvv', label: 'CVV', required: true }
],
buttons: { cancel: 'Cancel', confirm: 'Pay Now' }
});
// Multi-Step Wizard
const wizardResult = await Swal.wizard({
steps: [
{
title: 'Step 1: Personal Info',
form: [
{ type: 'text', name: 'firstName', label: 'First Name', required: true },
{ type: 'text', name: 'lastName', label: 'Last Name', required: true }
]
},
{
title: 'Step 2: Contact',
form: [
{ type: 'email', name: 'email', label: 'Email', required: true },
{ type: 'tel', name: 'phone', label: 'Phone Number' }
]
},
{
title: 'Step 3: Preferences',
form: [
{ type: 'select', name: 'plan', label: 'Select Plan',
options: ['Basic', 'Pro', 'Enterprise'] },
{ type: 'checkbox', name: 'newsletter', label: 'Subscribe to newsletter' }
]
}
],
buttons: { prev: 'Back', next: 'Next', confirm: 'Complete' }
});
console.log('Wizard data:', wizardResult.formData);
Toast Types
Toast Positions
Toast Features
Multiple Toasts
// Success Toast
Swal.toast({
icon: 'success',
title: 'Success!',
text: 'Your changes have been saved.'
});
// Error Toast
Swal.toast({
icon: 'error',
title: 'Error!',
text: 'Something went wrong.'
});
// Warning Toast
Swal.toast({
icon: 'warning',
title: 'Warning',
text: 'This action may have consequences.'
});
// Info Toast
Swal.toast({
icon: 'info',
title: 'Info',
text: 'Here is some information.'
});
// Loading Toast
const loadingToast = Swal.toast({
icon: 'loading',
title: 'Processing...',
text: 'Please wait...',
duration: 0 // Persistent until dismissed
});
// Later: loadingToast.dismiss();
// Toast Positions
Swal.toast({
icon: 'success',
title: 'Top Right',
position: 'top-end' // Options: top-start, top-center, top-end,
// bottom-start, bottom-center, bottom-end
});
// Toast with Actions
Swal.toast({
icon: 'info',
title: 'New Message',
text: 'You have a new message.',
buttons: {
view: {
text: 'View',
onClick: () => console.log('View clicked')
},
dismiss: 'Dismiss'
}
});
// Persistent Toast (no auto-dismiss)
Swal.toast({
icon: 'warning',
title: 'Attention Required',
text: 'Please review this item.',
duration: 0, // Won't auto-dismiss
showCloseButton: true
});
// Promise Toast (async operations)
Swal.toast.promise(
fetch('/api/save-data'),
{
loading: 'Saving...',
success: 'Data saved successfully!',
error: 'Failed to save data.'
}
);
// Alternative Promise Toast
const savePromise = saveData();
Swal.toast({
icon: 'loading',
title: 'Saving...'
}).then(async (toast) => {
try {
await savePromise;
toast.update({ icon: 'success', title: 'Saved!' });
} catch (e) {
toast.update({ icon: 'error', title: 'Failed!' });
}
});
// Multiple Toasts
['File uploaded', 'Processing complete', 'Email sent'].forEach((msg, i) => {
setTimeout(() => {
Swal.toast({ icon: 'success', title: msg });
}, i * 500);
});
// Dismiss All Toasts
Swal.toast.dismissAll();
Select a Style
Default
Clean & Modern
Neumorphism
Soft UI Shadows
Glassmorphism
Frosted Glass
Claymorphism
3D Clay Effect
Aurora UI
Gradient Flow
Holographic
Rainbow Shift
3D Depth
Perspective Transform
Luxury Gold
Premium Elegance
Animation Presets
Fade
Scale
Slide Up
Slide Down
3D Flip
Rotate
Bounce
Elastic
Modal Sizes
Modal Positions
// Default Style
Swal.modal({
title: 'Default Style',
text: 'Clean and modern design.',
style: 'default'
});
// Neumorphism Style
Swal.modal({
title: 'Neumorphism',
text: 'Soft shadows and subtle depth.',
style: 'neumorphism'
});
// Glassmorphism Style
Swal.modal({
title: 'Glassmorphism',
text: 'Frosted glass with blur effect.',
style: 'glassmorphism'
});
// Claymorphism Style
Swal.modal({
title: 'Claymorphism',
text: '3D clay-like appearance.',
style: 'claymorphism'
});
// Aurora UI Style
Swal.modal({
title: 'Aurora UI',
text: 'Flowing gradient animation.',
style: 'aurora'
});
// Holographic Style
Swal.modal({
title: 'Holographic',
text: 'Rainbow shimmer effect.',
style: 'holographic'
});
// 3D Depth Style
Swal.modal({
title: '3D Depth',
text: 'Perspective transforms.',
style: '3d'
});
// Luxury Gold Style
Swal.modal({
title: 'Luxury',
text: 'Premium gold accents.',
style: 'luxury'
});
// Custom Animation
Swal.modal({
title: 'Animated',
text: 'Custom entrance animation.',
animation: 'scale', // fade, scale, slide-up, slide-down, flip, rotate, bounce, elastic
animationDuration: 400
});
// Modal Sizes
Swal.modal({
title: 'Small Modal',
size: 'sm' // sm, md, lg, xl, full
});
Swal.modal({
title: 'Full Screen',
size: 'full'
});
// Modal Positions
Swal.modal({
title: 'Top Position',
position: 'top' // center, top, bottom, top-start, top-end, bottom-start, bottom-end
});
// Custom Colors
Swal.modal({
title: 'Custom Colors',
text: 'Fully customizable theme.',
background: '#1a1a2e',
color: '#eaeaea',
confirmButtonColor: '#6366f1',
cancelButtonColor: '#64748b'
});
// Custom CSS Class
Swal.modal({
title: 'Custom Class',
customClass: {
popup: 'my-custom-popup',
title: 'my-custom-title',
confirmButton: 'my-custom-btn'
}
});
// Backdrop Options
Swal.modal({
title: 'Custom Backdrop',
backdrop: 'rgba(0, 0, 0, 0.8)',
// Or with custom pattern:
backdrop: `rgba(0,0,0,0.8) url('/pattern.png') repeat`
});
3D Transform Effects
Shadow & Depth
Particle Effects
Liquid & Morphing
Text Effects
Icon Animations
Background Effects
// 3D Card Flip Animation
Swal.modal({
title: '3D Flip',
text: 'Watch the card flip!',
animation: '3d-flip',
style: 'glassmorphism'
});
// Tilt Effect on Hover
Swal.modal({
title: 'Tilt Effect',
text: 'Move your mouse over the modal.',
effect: 'tilt',
tiltAmount: 15
});
// Rotate Entry Animation
Swal.modal({
title: 'Rotate Entry',
text: '3D rotation entrance.',
animation: 'rotate-y',
animationDuration: 600
});
// Perspective Transform
Swal.modal({
title: 'Perspective',
text: 'Deep perspective effect.',
style: '3d',
perspective: 1000
});
// Layered Shadows
Swal.modal({
title: 'Layered Shadows',
text: 'Multiple shadow layers for depth.',
customClass: { popup: 'layered-shadow' }
});
// Glow Effect
Swal.modal({
title: 'Glow Effect',
text: 'Neon glow around the modal.',
effect: 'glow',
glowColor: '#6366f1'
});
// Confetti Celebration
Swal.modal({
icon: 'success',
title: 'Congratulations!',
text: 'You did it!',
effect: 'confetti',
confettiOptions: {
particleCount: 100,
spread: 70
}
});
// Particle Background
Swal.modal({
title: 'Particles',
text: 'Floating particles in background.',
effect: 'particles',
particleOptions: {
count: 50,
color: '#6366f1'
}
});
// Starfield Effect
Swal.modal({
title: 'Starfield',
text: 'Flying through stars!',
effect: 'starfield',
starSpeed: 2
});
// Liquid Button Effect
Swal.modal({
title: 'Liquid Buttons',
text: 'Buttons with liquid hover effect.',
buttonEffect: 'liquid'
});
// Wave Effect
Swal.modal({
title: 'Wave Background',
text: 'Animated wave pattern.',
effect: 'wave',
waveColor: 'rgba(99, 102, 241, 0.2)'
});
// Gradient Animated Text
Swal.modal({
title: '<span class="gradient-text">Gradient Title</span>',
text: 'Animated gradient on title.',
titleClass: 'animated-gradient'
});
// Typewriter Effect
Swal.modal({
title: 'Typewriter',
text: 'Watch the text appear...',
textEffect: 'typewriter',
typeSpeed: 50
});
// Glitch Text Effect
Swal.modal({
title: 'GLITCH',
text: 'Cyberpunk glitch effect.',
titleClass: 'glitch-effect'
});
// Neon Text Glow
Swal.modal({
title: 'Neon Glow',
text: 'Glowing neon text effect.',
style: 'neon',
glowColor: '#00ff88'
});
// Morphing Success Icon
Swal.modal({
icon: 'success',
title: 'Success!',
iconAnimation: 'morph',
animationDuration: 800
});
// Mesh Gradient Background
Swal.modal({
title: 'Mesh Gradient',
text: 'Beautiful gradient mesh.',
backdrop: 'mesh-gradient',
meshColors: ['#6366f1', '#8b5cf6', '#d946ef']
});
// Aurora Background Effect
Swal.modal({
title: 'Aurora',
text: 'Northern lights effect.',
style: 'aurora',
auroraSpeed: 'slow'
});
// Animated Blobs
Swal.modal({
title: 'Animated Blobs',
text: 'Floating blob shapes.',
effect: 'blobs',
blobColors: ['#6366f1', '#22d3ee', '#f472b6']
});
Hello World
This is a customizable modal message.
modal({
icon: 'success',
title: 'Hello World',
text: 'This is a customizable modal message.',
buttons: { confirm: 'OK' }
});
Lifecycle Hooks
Dynamic Updates
Modal Queue
Accessibility
Backdrop Options
Timer Features
Advanced demo output will appear here...
// Lifecycle Hooks
Swal.modal({
title: 'Lifecycle Hooks',
text: 'Watch the console for hook events.',
willOpen: () => console.log('Modal will open'),
didOpen: () => console.log('Modal is now open'),
willClose: () => console.log('Modal will close'),
didClose: () => console.log('Modal has closed'),
didRender: () => console.log('Modal rendered')
});
// Async Validation Before Close
Swal.modal({
title: 'Async Validation',
input: 'email',
preConfirm: async (email) => {
// Simulate API validation
const isValid = await validateEmailAPI(email);
if (!isValid) {
Swal.showValidationMessage('Email already exists!');
return false;
}
return email;
}
});
// Input Validation Hook
Swal.modal({
title: 'Validation Hook',
input: 'text',
inputValidator: (value) => {
if (!value) return 'This field is required';
if (value.length < 3) return 'Minimum 3 characters';
return null; // Valid
}
});
// Dynamic Content Updates
const modal = await Swal.modal({
title: 'Loading Data...',
allowOutsideClick: false,
didOpen: async () => {
Swal.showLoading();
const data = await fetchData();
Swal.update({
title: 'Data Loaded!',
html: `<p>Found ${data.count} items</p>`
});
Swal.hideLoading();
}
});
// Progress Bar Updates
Swal.modal({
title: 'Processing...',
html: '<div id="progress">0%</div>',
allowOutsideClick: false,
didOpen: async () => {
for (let i = 0; i <= 100; i += 10) {
document.getElementById('progress').textContent = i + '%';
await delay(200);
}
Swal.close();
}
});
// Button State Management
Swal.modal({
title: 'Button States',
showCancelButton: true,
didOpen: () => {
const confirmBtn = Swal.getConfirmButton();
confirmBtn.disabled = true;
confirmBtn.textContent = 'Please wait...';
setTimeout(() => {
confirmBtn.disabled = false;
confirmBtn.textContent = 'Ready!';
}, 2000);
}
});
// Sequential Modal Queue
Swal.queue([
{ title: 'Step 1', text: 'First step' },
{ title: 'Step 2', text: 'Second step' },
{ title: 'Step 3', text: 'Final step' }
]).then((results) => {
console.log('All steps completed:', results);
});
// Queue with Progress Indicator
const steps = ['Info', 'Details', 'Confirm'];
Swal.mixin({
progressSteps: steps,
confirmButtonText: 'Next'
}).queue(
steps.map((step, i) => ({
title: step,
currentProgressStep: i
}))
);
// ARIA Accessibility Labels
Swal.modal({
title: 'Accessible Modal',
text: 'Fully accessible with screen readers.',
ariaLabel: 'Important notification modal',
role: 'alertdialog',
ariaDescribedby: 'modal-description'
});
// Focus Trap Demo
Swal.modal({
title: 'Focus Trap',
html: `
<input type="text" placeholder="First field">
<input type="text" placeholder="Second field">
<button>Button</button>
`,
focusTrap: true,
returnFocus: true
});
// Static Backdrop (no dismiss on click)
Swal.modal({
title: 'Static Backdrop',
text: 'Click outside - nothing happens!',
allowOutsideClick: false,
backdrop: 'static'
});
// Heavy Blur Backdrop
Swal.modal({
title: 'Heavy Blur',
text: 'Background is heavily blurred.',
backdrop: 'blur(20px)'
});
// Colored Backdrop
Swal.modal({
title: 'Colored Backdrop',
text: 'Custom backdrop color.',
backdrop: 'rgba(99, 102, 241, 0.4)'
});
// No Backdrop
Swal.modal({
title: 'No Backdrop',
text: 'Modal without backdrop.',
backdrop: false
});
// Timer with Pause on Hover
Swal.modal({
title: 'Hover to Pause',
text: 'Timer pauses when you hover.',
timer: 5000,
timerProgressBar: true,
didOpen: (el) => {
el.addEventListener('mouseenter', Swal.stopTimer);
el.addEventListener('mouseleave', Swal.resumeTimer);
}
});
// Custom Progress Bar
Swal.modal({
title: 'Custom Progress',
timer: 3000,
timerProgressBar: true,
customClass: {
timerProgressBar: 'custom-progress-bar'
}
});
// Timer Callback
Swal.modal({
title: 'Timer Callback',
timer: 3000,
timerProgressBar: true
}).then((result) => {
if (result.dismiss === Swal.DismissReason.timer) {
console.log('Closed by timer!');
}
});
Ultra Lightweight
Core bundle under 5KB gzipped. Tree-shakeable exports ensure you only ship what you use.
TypeScript Native
Written in TypeScript with comprehensive type definitions and IntelliSense support.
8+ Visual Styles
Neumorphism, Glassmorphism, Claymorphism, Aurora, Holographic, 3D, and Luxury themes.
WCAG 2.1 AA
Full accessibility with keyboard navigation, focus trapping, and screen reader support.
30+ Field Types
Complete form system with text, numeric, date/time, selection, file upload, and more.
Plugin System
Extensible architecture with lifecycle hooks, custom presets, and validators.
3D Effects
Advanced 3D transforms, parallax, particles, confetti, and morphing animations.
Visual Builder
Design modals visually with real-time preview and instant code generation.