# SweetAlert2 — Beautiful Responsive Accessible Popup Replacement

> SweetAlert2 replaces the plain browser alert, confirm, and prompt dialogs with customizable animated popups that support HTML content, inputs, and async flows.

## Install

Save as a script file and run:

# SweetAlert2 — Beautiful Responsive Accessible Popup Replacement

## Quick Use
```bash
npm install sweetalert2
```
```js
import Swal from 'sweetalert2';

// Simple alert
Swal.fire('Done!', 'Your file has been saved.', 'success');

// Confirmation dialog
const result = await Swal.fire({
  title: 'Delete item?',
  text: 'This cannot be undone.',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete'
});
if (result.isConfirmed) { /* delete logic */ }
```

## Introduction
The native `window.alert()` and `window.confirm()` dialogs are ugly, block the main thread, and offer no customization. SweetAlert2 replaces them with polished, responsive popups that support icons, HTML content, form inputs, timers, and promise-based async workflows. It works with any framework or plain JavaScript and requires zero configuration for basic use.

## What SweetAlert2 Does
- Replaces native alert, confirm, and prompt with styled animated popups
- Displays success, error, warning, info, and question icons out of the box
- Supports HTML content, images, form inputs, and custom footer elements
- Returns promises so popup results integrate cleanly with async/await code
- Handles focus trapping and keyboard navigation for accessibility

## Architecture Overview
SweetAlert2 creates a modal overlay with a centered popup container. The popup is built from a template of DOM elements (title, content, actions, footer) that are shown or hidden based on configuration. Animations use CSS keyframes. The `Swal.fire()` function returns a promise that resolves with the user's response when the popup closes. Internally, a queue system allows chaining multiple popups in sequence.

## Self-Hosting & Configuration
- Install from npm or load via CDN; no build step needed for basic usage
- Pass a configuration object to `Swal.fire()` with properties like `title`, `text`, `icon`, and `html`
- Use `input` property for text, email, password, select, checkbox, or file inputs
- Customize the theme via the `customClass` option or override SCSS variables
- Use `Swal.mixin()` to create reusable presets like a toast notification mixin

## Key Features
- Promise-based API that integrates cleanly with async/await workflows
- Built-in toast mode for non-blocking notification messages
- Auto-close timer with progress bar via `timer` and `timerProgressBar` options
- Pre-confirm hooks for async validation before closing the popup
- Responsive design that adapts to mobile screens automatically

## Comparison with Similar Tools
- **Native `window.alert()`** — blocks the thread, no styling or customization
- **Toastify.js** — notification toasts only; SweetAlert2 covers alerts, confirms, and input forms
- **Notiflix** — similar popup library; SweetAlert2 has a larger ecosystem and more customization
- **React Modal / Radix Dialog** — framework-specific accessible modals; SweetAlert2 is framework-agnostic and higher-level
- **Bootstrap Modal** — requires Bootstrap CSS; SweetAlert2 is standalone with its own styling

## FAQ
**Q: Can I use SweetAlert2 as a toast notification?**
A: Yes. Use `Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 })` to create a reusable toast.

**Q: How do I use SweetAlert2 with React?**
A: Import and call `Swal.fire()` in event handlers or effects. The `sweetalert2-react-content` wrapper lets you pass JSX as content.

**Q: Can I validate user input before closing?**
A: Yes. Use the `preConfirm` callback to run validation or async API calls. Return `false` to prevent the popup from closing.

**Q: Is SweetAlert2 accessible?**
A: It traps focus within the popup, restores focus on close, and supports keyboard navigation. Add ARIA labels via `ariaLabel` for custom content.

## Sources
- https://github.com/sweetalert2/sweetalert2
- https://sweetalert2.github.io
- https://sweetalert2.github.io/#configuration

---
Source: https://tokrepo.com/en/workflows/0d3b6ce0-44b3-11f1-9bc6-00163e2b0d79
Author: Script Depot