marcomsweetalert

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

Installation

npm install --save marcomsweetalert

Or grab from jsdelivr CDN :

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Usage

<script src="sweetalert2/dist/sweetalert2.all.min.js"></script>

You can also include the stylesheet separately if desired:

<script src="marcomsweetalert/dist/marcomsweetalert.min.js"></script>
<link rel="stylesheet" href="marcomsweetalert/dist/marcomsweetalert.min.css">

Or:

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

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

Or with JS modules:

<link rel="stylesheet" href="marcomsweetalert/dist/marcomsweetalert.css">

<script type="module">
  import Swal from 'marcomsweetalert/src/marcomsweetalert.js'
</script>

It's possible to import JS and CSS separately, e.g. if you need to customize styles:

import Swal from 'marcomsweetalert/dist/marcomsweetalert.js'

import 'marcomsweetalert/src/marcomsweetalert.scss'

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 marcomsweetalert 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.isConfirmed) {
    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'
    )
  }
})

Browser compatibility

Chrome	Firefox	Safari	Edge
:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark: