A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
π Upgrading from v6.x to v7.x? Read the release notes!
π Migrating from SweetAlert? SweetAlert 1.x to SweetAlert2 migration guide
npm install --save sweetalert2
Or:
bower install --save sweetalert2
Or download from CDN: jsdelivr.com/package/npm/sweetalert2
<script src="sweetalert2/dist/sweetalert2.all.min.js"></script>
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>
You can also include the stylesheet separately if desired:
<script src="sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2/dist/sweetalert2.min.css">
Or:
// ES6 Modules or TypeScript
import Swal from 'sweetalert2'
// CommonJS
const Swal = require('sweetalert2')
It's possible to import JS and CSS separately, e.g. if you need to customize styles:
import swal from 'sweetalert2/dist/sweetalert2.js'
import 'sweetalert2/src/sweetalert2.scss'
Please note that TypeScript is well-supported, so you don't have to install a third-party declaration file.
The most basic message:
Swal('Hello world!')
A message signaling an error:
Swal('Oops...', 'Something went wrong!', 'error')
Handling the result of SweetAlert2 modal:
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'
)
}
})
IE11* | Edge | Chrome | Firefox | Safari | Opera | Android Browser* | UC Browser* |
---|---|---|---|---|---|---|---|
βοΈ | βοΈ | βοΈ | βοΈ | βοΈ | βοΈ | βοΈ | βοΈ |
* ES6 Promise polyfill should be included, see usage example.
Note that SweetAlert2 does not and will not provide support or functionality of any kind on IE10 and lower.
- ngx-sweetalert2 - Angular 4+ integration
- sweetalert2-react-content - React integration
- sweetalert2-webpack-demo - webpack demo
- sweetalert2-parcel-demo - overriding SCSS variables demo
- avil13/vue-sweetalert2 - Vue.js wrapper
- softon/sweetalert - Laravel 5 Package
@zenflow | @toverux | @acupajoe | @samturrell | @birjolaxew |
If you would like to contribute enhancements or fixes, please do the following:
-
Fork the
sweetalert2
repository and clone it locally. -
When in the SweetAlert2 directory, run
npm install
oryarn install
to install dependencies. -
To begin active development, run
npm start
oryarn 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
SheetJS LLC | Unique-P GmbH |
Has SweetAlert2 helped you create an amazing application? You can show your support by making a donation in one of several ways: