Github url

sweetalert2

by sweetalert2

sweetalert2 /sweetalert2

A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's ...

11.5K Stars 1.2K Forks Last release: 10 days ago (v9.17.1) MIT License 2.3K Commits 547 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

[= Become the :trophy: Ultimate Sponsor of SweetAlert2 and place your banner here (100K+ unique visitors per month) =]

SweetAlert2

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


See SweetAlert2 in action ↗

Build StatusCoverage StatusVersionjsdelivrSupport Donate


:shipit: The author of SweetAlert2 (@limonte) is looking for short-term to medium-term working contracts in front-end, preferably OSS.


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

:point_right: 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/[email protected]"></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/[email protected]/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!', icon: '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 -------|------|--------|---------|--------|-------|------------ :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |

* 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 ↗

](https://github.com/sweetalert2/sweetalert2-themes))

Related projects

Related community projects

Collaborators

| | -|-|-@gverni | @zenflow | @toverux

Contributing

Maintainabilitysemantic-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.

  1. 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

Sponsors

| | | -|-|-|-Become a sponsor | FlowCrypt | brainbi price monitoring | Tiago de Oliveira Stutz

| | -|-|-Zilla Themes | SebaEBC | WP Reset

NSFW Sponsors

| | | | -|-|-|-|-STED | Sextopedia | My Sex Toy Guide | Best Blowjob Machines | YourDoll

| | | | -|-|-|-|-Celebjihad | STC | Bingato | RealSexDoll | DoctorClimax

Support and Donations

Has SweetAlert2 helped you create an amazing application? You can show your support via GitHub Sponsors

Alternative ways for donations (PayPal, cryptocurrencies, etc.) are listed here: https://sweetalert2.github.io/#donations

Hall of Donators :trophy:

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.