A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
npm install --save marcomsweetalert
Or grab from jsdelivr CDN :
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<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'
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'
)
}
})
Chrome | Firefox | Safari | Edge |
---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ |