Popularity
8.1
-
Activity
9.5
Growing
10,359
202
1,141

Code Quality Rank: L1
Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: Modals And Popups     Alert     Modal     Sweetalert     Notification     Prompt     Confirm     Sweetalert2    
Latest version: v9.4.3

sweetalert2 alternatives and similar libraries

Based on the "Modals and Popups" category

Do you think we are missing an alternative of sweetalert2 or a related project?

Add another 'Modals and Popups' Library
Proactively identify front-end issues with easy-to-build synthetics tests. 14-day free trial.
More from our partner

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
More from our team

README

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

See SweetAlert2 in action ā†—

: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/sweetalert2@9"></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-polyfill9/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 ā†—)

Collaborators
@gverni @zenflow @toverux @acupajoe

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

Sponsors

[](DONATIONS.md)
[Become a sponsor](DONATIONS.md) FlowCrypt STED (NSFW 18+) PriceListo LoveLoxy (NSFW 18+)
SebaEBC Bingato (NSFW 18+) NDCHost SheetJS LLC Unique-P GmbH STC (NSFW 18+)

Support and Donations

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

  • GitHub Sponsors :heart:
  • PayPal
  • PayPal.me
  • Bitcoin: 16Z7RvFv7PsV3XzFvchYwPnRfw9KeLTZQJ
  • Ether: 0x192096161eB2273f12b1cB4E31aBB09Bfc03a7F3
  • Bitcoin Cash: qz28x66hrljtdz3052p8ya3cmkwwva5avy0msz2ej3
  • Stellar: GDUM4VJZYDNRHBTKUQBOPC374AP6MMMVOJDMSHIPEJPEMBCY4ZHH6NDY

[Hall of Donators :trophy:](DONATIONS.md)