[= Become the :trophy: Ultimate Sponsor of SweetAlert2 and place your banner here (100K+ unique visitors per month) =]

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.

--- :shipit: The author of SweetAlert2 ([@limonte](https://github.com/limonte/)) is looking for short-term to medium-term working contracts in front-end, preferably OSS. --- :point_right: **Upgrading from v9.x to v10.x?** [Read the release notes!](https://github.com/sweetalert2/sweetalert2/releases/tag/v10.0.0)
If you're upgrading from v8.x, please [upgrade from v8 to v9](https://github.com/sweetalert2/sweetalert2/releases/tag/v10.0.0) first!
If you're upgrading from v7.x, please [upgrade from v7 to v8](https://github.com/sweetalert2/sweetalert2/releases/tag/v8.0.0) first!
If you're upgrading from v6.x, please [upgrade from v6 to v7](https://github.com/sweetalert2/sweetalert2/releases/tag/v7.0.0) first! :point_right: **Migrating from [SweetAlert](https://github.com/t4t5/sweetalert)?** [SweetAlert 1.x to SweetAlert2 migration guide](https://github.com/sweetalert2/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2) --- Installation ------------ ```sh npm install --save sweetalert2 ``` Or grab from [jsdelivr CDN](https://www.jsdelivr.com/package/npm/sweetalert2) : ```html ``` Usage ----- ```html ``` You can also include the stylesheet separately if desired: ```html ``` Or: ```js // ES6 Modules or TypeScript import Swal from 'sweetalert2' // CommonJS const Swal = require('sweetalert2') ``` Or with JS modules: ```html ``` It's possible to import JS and CSS separately, e.g. if you need to customize styles: ```js import Swal from 'sweetalert2/dist/sweetalert2.js' import 'sweetalert2/src/sweetalert2.scss' ``` Please note that [TypeScript is well-supported](https://github.com/sweetalert2/sweetalert2/blob/master/sweetalert2.d.ts), so you don't have to install a third-party declaration file. Examples -------- The most basic message: ```js Swal.fire('Hello world!') ``` A message signaling an error: ```js Swal.fire('Oops...', 'Something went wrong!', 'error') ``` Handling the result of SweetAlert2 modal: ```js Swal.fire({ title: 'Are you sure?', text: 'You will not be able to recover this imaginary file!', icon: 'warning', showCancelButton: true, confirmButtonText: 'Yes, delete it!', cancelButtonText: 'No, keep it' }).then((result) => { if (result.value) { Swal.fire( 'Deleted!', 'Your imaginary file has been deleted.', 'success' ) // For more information about handling dismissals please visit // https://sweetalert2.github.io/#handling-dismissals } else if (result.dismiss === Swal.DismissReason.cancel) { Swal.fire( 'Cancelled', 'Your imaginary file is safe :)', 'error' ) } }) ``` ## [Go here to see the docs and more examples ↗](https://sweetalert2.github.io/) Browser compatibility --------------------- IE11* | Edge | Chrome | Firefox | Safari | Opera | UC Browser -------|------|--------|---------|--------|-------|------------ :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | \* ES6 Promise polyfill should be included, see [usage example](#usage). Note that SweetAlert2 **does not** and **will not** provide support or functionality of any kind on IE10 and lower. Themes ([`sweetalert2-themes ↗`](https://github.com/sweetalert2/sweetalert2-themes)) ------ - [`Dark`](https://github.com/sweetalert2/sweetalert2-themes/tree/master/dark) - [`Minimal`](https://github.com/sweetalert2/sweetalert2-themes/tree/master/minimal) - [`Borderless`](https://github.com/sweetalert2/sweetalert2-themes/tree/master/borderless) - [`Bootstrap 4`](https://github.com/sweetalert2/sweetalert2-themes/tree/master/bootstrap-4) - [`Material UI`](https://github.com/sweetalert2/sweetalert2-themes/tree/master/material-ui) - [`WordPress Admin`](https://github.com/sweetalert2/sweetalert2-themes/tree/master/wordpress-admin) - [`Bulma`](https://github.com/sweetalert2/sweetalert2-themes/tree/master/bulma) - [`Default`](https://github.com/sweetalert2/sweetalert2-themes/tree/master/default) Related projects ------------------------- - [ngx-sweetalert2](https://github.com/sweetalert2/ngx-sweetalert2) - Angular 4+ integration - [sweetalert2-react-content](https://github.com/sweetalert2/sweetalert2-react-content) - React integration - [sweetalert2-webpack-demo](https://github.com/sweetalert2/sweetalert2-webpack-demo) - webpack demo - [sweetalert2-parcel-demo](https://github.com/sweetalert2/sweetalert2-parcel-demo) - overriding SCSS variables demo Related community projects ------------------------- - [avil13/vue-sweetalert2](https://github.com/avil13/vue-sweetalert2) - Vue.js wrapper - [realrashid/sweet-alert](https://github.com/realrashid/sweet-alert) - Laravel 5 Package - [Basaingeal/Razor.SweetAlert2](https://github.com/Basaingeal/Razor.SweetAlert2) - Blazor Wrapper - [ElectronAlert](https://electron.guide/electron-alert/) - SweetAlert2 for Electron applications (main process) Collaborators ------------- [![](https://avatars3.githubusercontent.com/u/17089396?v=4&s=80)](https://github.com/gverni) | [![](https://avatars3.githubusercontent.com/u/3198597?v=4&s=80)](https://github.com/zenflow) | [![](https://avatars1.githubusercontent.com/u/1343250?v=4&s=80)](https://github.com/toverux) -|-|- [@gverni](https://github.com/gverni) | [@zenflow](https://github.com/zenflow) | [@toverux](https://github.com/toverux) Contributing ------------ [![Maintainability](https://api.codeclimate.com/v1/badges/eba34bb80477933854d4/maintainability)](https://codeclimate.com/github/sweetalert2/sweetalert2/maintainability) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/sweetalert2/sweetalert2/blob/master/CHANGELOG.md) If you would like to contribute enhancements or fixes, please do the following: 1. Fork the `sweetalert2` repository and clone it locally. 2. Make sure you have [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) installed. 3. When in the SweetAlert2 directory, run `npm install` or `yarn install` to install dependencies. 4. To begin active development, run `npm start` or `yarn start`. This does several things for you: - Builds the `dist` folder - Serves sandbox.html @ http://localhost:8080/ (browser-sync ui: http://localhost:8081/) - Re-builds and re-loads as necessary when files change Big Thanks ---------- - [Serena Verni (@serenaperora)](https://serena.verni.xyz) for creating the amazing project logo - [Sauce Labs](https://saucelabs.com/) for providing the reliable cross-browser testing platform Sponsors -------- [

](https://flowcrypt.com/?utm_source=sweetalert2&utm_medium=banner) [

](SPONSORS.md) | [

](https://flowcrypt.com/?utm_source=sweetalert2&utm_medium=logo) | [

](https://www.brainbi.dev/) | [

](https://zillathemes.com/) | [

](https://github.com/sebaebc) | [

](https://wpreset.com/?utm_source=sweetalert2&utm_medium=logo) -|-|- [Zilla Themes](https://zillathemes.com/) | [SebaEBC](https://github.com/sebaebc) | [WP Reset](https://wpreset.com/?utm_source=sweetalert2&utm_medium=logo) NSFW Sponsors ------------- [

](https://twerkingbutt.com/?utm_source=sweetalert2&utm_medium=logo) | [

](https://sextoyeducation.com/?utm_source=sweetalert2&utm_medium=logo) | [

](https://sextopedia.com/?utm_source=sweetalert2&utm_medium=logo) | [

](https://www.mysextoyguide.com/?utm_source=sweetalert2&utm_medium=logo) | [

](https://www.bestblowjobmachines.com/?utm_source=sweetalert2&utm_medium=logo) | [

](https://www.yourdoll.com/?utm_source=sweetalert2&utm_medium=logo) -|-|-|-|-|- [Twerking Butt](https://twerkingbutt.com/?utm_source=sweetalert2&utm_medium=logo) | [STED](https://sextoyeducation.com/?utm_source=sweetalert2&utm_medium=logo) | [Sextopedia](https://sextopedia.com/?utm_source=sweetalert2&utm_medium=logo) | [My Sex Toy Guide](https://www.mysextoyguide.com/?utm_source=sweetalert2&utm_medium=logo) | [Best Blowjob Machines](https://www.bestblowjobmachines.com/?utm_source=sweetalert2&utm_medium=logo) | [YourDoll](https://www.yourdoll.com/?utm_source=sweetalert2&utm_medium=logo) [

](https://celebjihad.ltd/?utm_source=sweetalert2&utm_medium=logo) | [

](https://sextoycollective.com/?utm_source=sweetalert2&utm_medium=logo) | [

](https://bingato.com/?utm_source=sweetalert2&utm_medium=logo) | [

](https://realsexdoll.com/?utm_source=sweetalert2&utm_medium=logo)| [

](https://doctorclimax.com/) -|-|-|-|- [Celebjihad](https://celebjihad.ltd/?utm_source=sweetalert2&utm_medium=logo) | [STC](https://sextoycollective.com/?utm_source=sweetalert2&utm_medium=logo) | [Bingato](https://bingato.com/?utm_source=sweetalert2&utm_medium=logo) | [RealSexDoll](https://realsexdoll.com/?utm_source=sweetalert2&utm_medium=logo) | [DoctorClimax](https://doctorclimax.com/) Support and Donations --------------------- Has SweetAlert2 helped you create an amazing application? You can show your support via [GitHub Sponsors](https://github.com/sponsors/limonte) Alternative ways for donations (PayPal, cryptocurrencies, etc.) are listed here: https://sweetalert2.github.io/#donations ### [Hall of Donators :trophy:](DONATIONS.md)