Overview Official Website
A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes
Usage
Sweetalert2's CSS and Javascript files are bundled in the vender.min.css and vendor.js and globally included in all pages.
Basic#
<button type="button" class="btn btn-primary" id="sweetalert-basic">Click me</button>
if (document.getElementById("sweetalert-basic"))
document.getElementById("sweetalert-basic").addEventListener("click", function () {
Swal.fire({
title: 'Any fool can use a computer',
confirmButtonClass: 'btn btn-primary w-xs mt-2',
buttonsStyling: false,
showCloseButton: true
})
});
A Title with a Text Under#
<button type="button" class="btn btn-primary" id="sweetalert-title">Click me</button>
//A title with a text under
if (document.getElementById("sweetalert-title"))
document.getElementById("sweetalert-title").addEventListener("click", function () {
Swal.fire({
title: "The Internet?",
text: 'That thing is still around?',
icon: 'question',
confirmButtonClass: 'btn btn-primary w-xs mt-2',
buttonsStyling: false,
showCloseButton: false
})
});
Message#
<button type="button" class="btn btn-success" id="sweetalert-success">Success</button>
<button type="button" class="btn btn-warning" id="sweetalert-warning">Warning</button>
<button type="button" class="btn btn-info" id="sweetalert-info">Info</button>
<button type="button" class="btn btn-danger" id="sweetalert-error">Error</button>
//Success Message
if (document.getElementById("sweetalert-success"))
document.getElementById("sweetalert-success").addEventListener("click", function () {
Swal.fire({
title: 'Good job!',
text: 'You clicked the button!',
icon: 'success',
showCancelButton: true,
confirmButtonClass: 'btn btn-primary w-xs me-2 mt-2',
cancelButtonClass: 'btn btn-danger w-xs mt-2',
buttonsStyling: false,
showCloseButton: false
})
});
//error Message
if (document.getElementById("sweetalert-error"))
document.getElementById("sweetalert-error").addEventListener("click", function () {
Swal.fire({
title: 'Oops...',
text: 'Something went wrong!',
icon: 'error',
confirmButtonClass: 'btn btn-primary w-xs mt-2',
buttonsStyling: false,
footer: '<a href="">Why do I have this issue?</a>',
showCloseButton: false
})
});
//info Message
if (document.getElementById("sweetalert-info"))
document.getElementById("sweetalert-info").addEventListener("click", function () {
Swal.fire({
title: 'Oops...',
text: 'Something went wrong!',
icon: 'info',
confirmButtonClass: 'btn btn-primary w-xs mt-2',
buttonsStyling: false,
footer: '<a href="">Why do I have this issue?</a>',
showCloseButton: false
})
});
//Warning Message
if (document.getElementById("sweetalert-warning"))
document.getElementById("sweetalert-warning").addEventListener("click", function () {
Swal.fire({
title: 'Oops...',
text: 'Something went wrong!',
icon: 'warning',
confirmButtonClass: 'btn btn-primary w-xs mt-2',
buttonsStyling: false,
footer: '<a href="">Why do I have this issue?</a>',
showCloseButton: false
})
});
Long content Images Message#
<button type="button" class="btn btn-primary" id="sweetalert-longcontent">Click me</button>
// long content
if (document.getElementById("sweetalert-longcontent"))
document.getElementById("sweetalert-longcontent").addEventListener("click", function () {
Swal.fire({
imageUrl: 'https://placeholder.pics/svg/300x1500',
imageHeight: 1500,
imageAlt: 'A tall image',
confirmButtonClass: 'btn btn-primary w-xs mt-2',
buttonsStyling: false,
showCloseButton: false
})
});
Parameter#
<button type="button" class="btn btn-primary" id="sweetalert-params">Click me</button>
//Parameter
if (document.getElementById("sweetalert-params"))
document.getElementById("sweetalert-params").addEventListener("click", function () {
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
confirmButtonClass: 'btn btn-primary w-xs me-2 mt-2',
cancelButtonClass: 'btn btn-danger w-xs mt-2',
buttonsStyling: false,
showCloseButton: false
}).then(function (result) {
if (result.value) {
Swal.fire({
title: 'Deleted!',
text: 'Your file has been deleted.',
icon: 'success',
confirmButtonClass: 'btn btn-primary w-xs mt-2',
buttonsStyling: false
})
} else if (
// Read more about handling dismissals
result.dismiss === Swal.DismissReason.cancel
) {
Swal.fire({
title: 'Cancelled',
text: 'Your imaginary file is safe :)',
icon: 'error',
confirmButtonClass: 'btn btn-primary mt-2',
buttonsStyling: false
})
}
});
});