JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Sweetalert2

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

    • 🔾82%Overall
    • 8,995
    • 14 hours
    • 🕩999
    • 👥5

    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


    :raised_hands: :raised_hands: :raised_hands: Help wanted!

    We just started the sweetalert2-themes project, for now 3 themes are available: dark, minimal, and borderless. Please help us with other themes, I would be happy to donate some :moneybag: for all active contributors. The quick-start contributing guide is here.

    Thank you :heart:


    :point_right: 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!

    :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@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')
    

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

    Collaborators

    @gverni @zenflow @toverux @acupajoe @samturrell

    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:

    Backers

    PriceListo 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:

    • PayPal
    • Bitcoin: 12BxefvPMtHePgfPRDL1SaZYSG4GwQmWoP
    • Ether: 0x36e2b10666e2c0dc343901895ba3697b5d3214d1
    • Bitcoin Cash: qqxs402qszgwuue00gwxw996lzhpa8up2unqm0y46g
    • Stellar: GBRS5KGFJO4OBUGW3TRQBIVXTM5YDS53DOSHGA3LKVE2YXKVKNVDONBP

    Or give the new Brave Browser a try with our referral link: https://brave.com/swe698

    Hall of Donators :trophy:

    Show All