Need help with sweetalert2?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

sweetalert2
12.9K Stars 1.3K Forks MIT License 2.5K Commits 15 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

[= 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 Status Coverage Status Version jsdelivr Support Donate


:moneybag: Get $100 in free credits with DigitalOcean!


:point_right: Upgrading from v9.x to v10.x? Read the release notes!
If you're upgrading from v8.x, please upgrade from v8 to v9 first!
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 :


Usage


You can also include the stylesheet separately if desired:


Or:

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'

// CommonJS const Swal = require('sweetalert2')

Or with JS modules:

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

Chrome

Firefox Safari Edge
:heavycheckmark: :heavycheckmark: :heavycheckmark: :heavycheckmark:

IF you need IE11 and old Edge support, please use the previous major version.

Themes (
sweetalert2-themes ↗
)

Related projects

Related community projects

Collaborators

@gverni @zenflow @toverux

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:
    • Builds the
      dist
      folder
    • Serves sandbox.html @ http://localhost:8080/ (browser-sync ui: http://localhost:8081/)
    • Re-builds and re-loads as necessary when files change
  5. To run tests, run

    npm run cypress:open
    or
    yarn cypress:open

Big Thanks

Sponsors

For all questions related to sponsorship please contact me via email [email protected]

Become a sponsor FlowCrypt Code Rubik NDCHost Bitvape

Halvin Laina Tiago de Oliveira Stutz SebaEBC

NSFW Sponsors

Mailovedoll Fresh Materials Joy Love Dolls STED My Sex Toy Guide

Best Blowjob Machines STC 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.