A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
Clone or download
semantic-release-bot chore(release): 7.26.29 [skip ci]
## [7.26.29](v7.26.28...v7.26.29) (2018-09-16)

### Bug Fixes

* **styles:** wrap buttons (fix [#1201](#1201)) ([f4364e7](f4364e7))
Latest commit 07a416f Sep 16, 2018
Permalink
Failed to load latest commit information.
.github chore: get rid of Gitter, its value has shown to be almost nothing Jun 21, 2018
assets chore(docs): update SweetAlert2 gif (#876) Feb 21, 2018
src fix(styles): wrap buttons (fix #1201) Sep 16, 2018
test chore(dev-deps): bump sinon to ^6.1.5 Sep 4, 2018
tools fix(release): purge jsdelivr cache after releasing a new version (#1214) Sep 7, 2018
utils chore(semantic-release): trigger release from the dist branch Sep 6, 2018
.appveyor.yml Fix/require in node env (#998) Mar 7, 2018
.babelrc chore(dev-deps): upgrade to Babel 7 Sep 4, 2018
.editorconfig Better type declaration for inputAttributes (#467) Mar 14, 2017
.eslintignore chore(dev): add .eslintignore Jul 25, 2018
.eslintrc.js chore(eslint): enforce object-curly-spacing rule Jul 29, 2018
.gitignore feat(dev): add integration with coveralls (#1176) Jul 24, 2018
.sass-lint.yml chrore(linters): enable property-sort-order for sass-lint (#889) Feb 7, 2018
.travis.yml fix(release): re-enable running tests before making release Sep 6, 2018
BACKERS.md Create BACKERS.md May 3, 2018
CHANGELOG.md chore(release): 7.26.29 [skip ci] Sep 16, 2018
DONATIONS.md chore(donations): add Patrik Kernstock Aug 25, 2018
LICENSE Add gulp watch task, improved contribution section in README. Jan 19, 2015
README.md fix(release): use --squash for merging master into dist Sep 6, 2018
bower.json chore(bower.json): update ignore section Mar 20, 2018
gulpfile.js chore(dev-deps): upgrade to Babel 7 Sep 4, 2018
karma.conf.js chore(dev): switch back to webpack 3 for WSL compatibility Aug 9, 2018
package.json chore(release): 7.26.29 [skip ci] Sep 16, 2018
release.config.js fix(release): purge jsdelivr before switching to master (#1215) Sep 7, 2018
sweetalert2.d.ts feat(d.ts): add getTimerLeft() Aug 9, 2018
tslint.json Restore compatibility with old TypeScript versions and fix DismissRea… Feb 24, 2018
yarn.lock chore(semantic-release): build dist in semantic-release Sep 6, 2018

README.md

SweetAlert2


Build Status: Linux Build Status: Windows Coverage Status Version semantic-release badge jsdelivr Support me on Patreon PayPal Donate

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


See SweetAlert2 in action ↗


👉 Upgrading from v6.x to v7.x? Read the release notes!

👉 Migrating from SweetAlert? SweetAlert 1.x to SweetAlert2 migration guide


Installation

npm install --save sweetalert2

Or:

bower install --save sweetalert2

Or download from CDN: jsdelivr.net/npm/sweetalert2

Usage

<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"></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.

Examples

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'
    )
  }
})

Go here to see the docs and more examples ↗

Browser compatibility

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.

Related projects

Related community projects

Collaborators

@zenflow @toverux @acupajoe @samturrell @birjolaxew

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 or yarn 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:

Donations

Has SweetAlert2 helped you create an amazing application? You can show your support by making a donation in one of several ways:

Hall of Donators 🏆