Skip to content
A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
JavaScript CSS Other
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: add limonte to FUNDING.yml Oct 8, 2019
assets chore: add new square logo in assets (#1691) Jul 29, 2019
bin chore: @limonte is looking for working contracts Aug 17, 2019
src chore(release): 8.18.3 [skip ci] Oct 9, 2019
test fix: apply customClass only to visible input (#1767) Oct 9, 2019
tools chore: bump dev-deps May 7, 2019
.appveyor.yml chore(appveyor): add appveyor-retry to 'npm i' step Jul 13, 2019
.babelrc chore(dev-deps): upgrade to Babel 7 Sep 4, 2018
.editorconfig Better type declaration for inputAttributes (#467) Mar 14, 2017
.eslintrc.js chore: remove parserOptions, it's in eslint-config-standard Aug 19, 2019
.gitignore chore: add .idea and .vscode to .gitignore (#1688) Jul 25, 2019
.stylelintrc.json chore: use @sweetalert2/stylelint-config Jul 3, 2019
.travis.yml chore: bump semantic-release to 16.0.0-beta.22 Aug 2, 2019
CHANGELOG.md chore(release): 8.18.3 [skip ci] Oct 9, 2019
DONATIONS.md chore: add loveloxy to Backers Sep 29, 2019
LICENSE Add gulp watch task, improved contribution section in README. Jan 19, 2015
README.md chore: add GitHub Sponsors to Donations Oct 9, 2019
gulpfile.js chore: do not slow down the dev process by linting all the files on e… Jul 22, 2019
karma.conf.js chore: get rid of ci-info dependency (#1769) Oct 11, 2019
package.json chore: remove the engines field from package.json Oct 11, 2019
release.config.js Update eslint-config-standard to the latest version 🚀 (#1656) Jul 11, 2019
sweetalert2.d.ts fix(types): getInput() returns HTMLInputElement (#1766) Oct 9, 2019
yarn.lock chore: get rid of ci-info dependency (#1769) Oct 11, 2019

README.md

SweetAlert2

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


See SweetAlert2 in action ↗

Build Status: Linux Build Status: Windows Coverage Status Version jsdelivr Support Donate


👉 Upgrading from v7.x to v8.x? Read the release notes!
If you're upgrading from v6.x, please upgrade from v6 to v7 first!

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


Installation

npm install --save sweetalert2

Or grab from jsdelivr CDN :

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

Usage

<script src="sweetalert2/dist/sweetalert2.all.min.js"></script>

<!-- Include a polyfill for ES6 Promises (optional) for IE11 -->
<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')

Or with JS modules:

<link rel="stylesheet" href="sweetalert2/dist/sweetalert2.css">

<script type="module">
  import Swal from 'sweetalert2/src/sweetalert2.js'
</script>

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.fire('Hello world!')

A message signaling an error:

Swal.fire('Oops...', 'Something went wrong!', 'error')

Handling the result of SweetAlert2 modal:

Swal.fire({
  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.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 ↗

Browser compatibility

IE11* Edge Chrome Firefox Safari Opera 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.

Themes (sweetalert2-themes ↗)

Related projects

Related community projects

Collaborators

@gverni @zenflow @toverux @acupajoe @samturrell @julianogtz

Contributing

Maintainability semantic-release

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:

Big Thanks

Backers

FlowCrypt STED PriceListo LoveLoxy SheetJS LLC Unique-P GmbH STC (NSFW) Become a backer

Support and Donations

Has SweetAlert2 helped you create an amazing application? You can show your support by making a donation:

  • GitHub Sponsors ❤️
  • PayPal
  • Bitcoin: 16Z7RvFv7PsV3XzFvchYwPnRfw9KeLTZQJ
  • Ether: 0x192096161eB2273f12b1cB4E31aBB09Bfc03a7F3
  • Bitcoin Cash: qz28x66hrljtdz3052p8ya3cmkwwva5avy0msz2ej3
  • Stellar: GDUM4VJZYDNRHBTKUQBOPC374AP6MMMVOJDMSHIPEJPEMBCY4ZHH6NDY

Hall of Donators 🏆

You can’t perform that action at this time.