A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
--- :point_right: **Upgrading from v6.x to v7.x?** [Read the release notes!](https://github.com/sweetalert2/sweetalert2/releases/tag/v7.0.0) :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 ------------ ```bash npm install --save sweetalert2 ``` Or: ```bash bower install --save sweetalert2 ``` Or download from CDN: [unpkg.com/sweetalert2](https://unpkg.com/sweetalert2) | [jsdelivr.net/npm/sweetalert2](https://cdn.jsdelivr.net/npm/sweetalert2) 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') ``` Please note that TypeScript is supported, so you don't have to install a third-party declaration file. Examples -------- The most basic message: ```js swal('Hello world!') ``` A message signaling an error: ```js swal('Oops...', 'Something went wrong!', 'error') ``` Handling the result of SweetAlert2 modal: ```js swal({ title: 'Are you sure?', text: 'You will not be able to recover this imaginary file!', type: 'warning', showCancelButton: true, confirmButtonText: 'Yes, delete it!', cancelButtonText: 'No, keep it' }).then((result) => { if (result.value) { swal( '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( '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 | Android Browser* | UC Browser* | |-------|------|--------|---------|--------|-------|------------------|-------------| | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | \* 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. Related projects ------------------------- - [ngx-sweetalert2](https://github.com/sweetalert2/ngx-sweetalert2) - Angular 4+ integration - [sweetalert2-adonisjs-nuxtjs](https://github.com/sweetalert2/sweetalert2-adonisjs-nuxtjs) - AdonisJS + Nuxt.js demo - [sweetalert2-webpack-demo](https://github.com/sweetalert2/sweetalert2-webpack-demo) - webpack demo Related community projects ------------------------- - [avil13/vue-sweetalert2](https://github.com/avil13/vue-sweetalert2) - Vue.js wrapper - [softon/sweetalert](https://github.com/softon/sweetalert) - Laravel 5 Package - [alex-shamshurin/sweetalert2-react](https://github.com/alex-shamshurin/sweetalert2-react) - React component Collaborators ------------- | [](https://github.com/toverux) | [](https://github.com/birjolaxew) | [](https://github.com/samturrell) | [](https://github.com/acupajoe) | [](https://github.com/zenflow) | [](https://github.com/patrickhlauke) | |-|-|-|-|-|-| | [@toverux](https://github.com/toverux) | [@birjolaxew](https://github.com/birjolaxew) | [@samturrell](https://github.com/samturrell) | [@acupajoe](https://github.com/acupajoe) | [@zenflow](https://github.com/zenflow) | [@patrickhlauke](https://github.com/patrickhlauke) | Contributors ------------ This project exists thanks to all the people who contribute.
Contributing
------------
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`. This does several things for you:
- Lints your code
- Builds the `dist` folder
- Serves sandbox.html @ http://localhost:8080/ (browser-sync ui: http://localhost:8081/)
- Serves unit tests @ http://localhost:3000
- Re-lints, re-builds, re-loads and re-tests as necessary when files change
Donations
---------
Has SweetAlert2 helped you create an amazing application? You can show your support by making a donation in one of several ways:
- [Donate via PayPal](https://www.paypal.me/limonte/5eur)
- [Donate via Patreon](https://www.patreon.com/limonte)
- [Become a backer on OpenCollective](https://opencollective.com/SweetAlert2#backer)
- [Become a sponsor on OpenCollective](https://opencollective.com/SweetAlert2#sponsor)
### [Hall of Donators :trophy:](DONATIONS.md)
### Backers
Thank you to all our backers! 🙏
### Sponsors
If you support this project by becoming a sponsor, your logo will show up here with a link to your website.
