A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes with zero dependencies.
SweetAlert2 is a beautiful, responsive, and highly customizable replacement for standard JavaScript popup boxes. It acts as a fully accessible (WAI-ARIA compliant) solution designed to dramatically improve user experience without complicating the codebase.
The main features of this tool include:
Zero Dependencies: It operates entirely standalone, requiring no external libraries or dependencies to function.
Highly Themeable: Features built-in Default, Dark, and Auto themes (which dynamically adapt to browser color schemes), alongside dedicated stylesheets for Bootstrap 4, Bootstrap 5, Material UI, and Bulma.
Deep Input & Validation System: Native support for diverse input types including text, email, passwords, radio buttons, dropdown selects, dates, range sliders, and file uploads, accompanied by custom synchronous or asynchronous validation handlers.
Advanced Layout & Animations: Offers precise positioning (such as top-end or bottom-start), custom screen backdrops (supporting image/GIF backdrops), toast notifications, and seamless custom animations using Animate.css.
Dynamic AJAX & Loading Handling: Simplifies asynchronous API requests by integrating built-in loading spinners, button disabling, and custom preConfirm resolution functions directly into the modal confirm flow.
Rich Interactive Controls: Supports custom multi-button dialogs (Confirm, Deny, Cancel), draggable modals, customizable timer progress bars, and custom HTML in descriptors or buttons.
Robust Lifecycle Hooks & API Methods: Provides fine-grained lifecycle control through hooks like didRender, willOpen, didOpen, willClose, didClose, and didDestroy, alongside programmatic methods to open, close, update, or inspect the modal state.
Declarative Templates: Allows developers to construct popups declaratively in HTML using <template> tags (ideal for Server-Side Rendering) and bind click events directly to them.
Framework Support: Offers official integrations with React, Vue, Angular, and Laravel to align with modern web stacks.