JSPM – sweetalert2@7.8.2

Package Exports

sweetalert2
sweetalert2/dist/sweetalert2
sweetalert2/dist/sweetalert2.css
sweetalert2/dist/sweetalert2.js
sweetalert2/dist/sweetalert2.min.css
sweetalert2/dist/sweetalert2.min.js
sweetalert2/src/utils/dom

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sweetalert2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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: unpkg.com/sweetalert2 | 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://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.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')

Please note that TypeScript is 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'
    )
  // result.dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
  } else if (result.dismiss === '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.

Collaborators


@toverux	@birjolaxew	@samturrell	@acupajoe	@zenflow	@patrickhlauke

Contributing

If you would like to contribute enhancements or fixes, please do the following:

Fork the sweetalert2 repository and clone it locally.
Make sure you have npm or yarn installed.
When in the SweetAlert2 directory, run npm install or yarn install to install dependencies.
Start gulp watcher gulp watch to automatically serve, build, and minify the SCSS and JS-files.
Ensure that you didn't break any of tests:

in browser: http://localhost:8080/test/qunit/
via CLI: npm test

Make sure that dist/* files aren't committed and create a pull request.

ngx-sweetalert2 - Angular 4+ integration
sweetalert2-adonisjs-nuxtjs - AdonisJS + Nuxt.js demo
sweetalert2-webpack-demo - webpack demo

avil13/vue-sweetalert2 - Vue.js wrapper
softon/sweetalert - Laravel 5 Package
alex-shamshurin/sweetalert2-react - React component

Donations

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

sweetalert2