✨ Key Features
Material Design 3
Modern and consistent styling
Dark Mode
Auto theme detection
Keyboard Support
ESC & Enter shortcuts
Smooth Animations
Fluid transitions
📦 Basic Dialogs
Essential dialog types for common use cases
xAlert
Simple alert dialog with a single button
xAlert({ title: 'Success!', message: '...' })
xConfirm
Confirmation dialog with two buttons
xConfirm({ title: 'Confirm?', message: '...' })
xPrompt
Input dialog to get user text
xPrompt({ title: 'Name', placeholder: '...' })
🎨 Theme Examples
Different theme configurations
Light Theme
Default light theme with bright colors
Dark Theme
Dark theme for low-light environments
Auto Theme
Follows system preference
Custom Colors
Personalized color scheme
🚀 Advanced Features New in v2
Powerful new capabilities
Input Validation
Validate user input with onValidate function
onValidate: (val) => val.length >= 3
xCustom NEW
Create custom dialogs with HTML content
xCustom({ content: '<p>HTML</p>' })
No Backdrop Close
Prevent closing by clicking outside
allowCloseClickBackdrop: false
Ripple Effects
Material Design ripple on buttons
enableRippleEffect: true
Multiple Modals
Open multiple dialogs at once
Close All Modals
Close all open dialogs programmatically
closeAllModals()
💡 Practical Examples
Real-world use cases
Delete Confirmation
Confirm destructive actions
User Registration
Collect user information
Success Message
Show success feedback
Warning Message
Display important warnings
⚙️ Global Configuration
Set default options for all dialogs