Sweetalert2

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

Import Package
<!-- Sweet Alert package-->
import Swal from "sweetalert2";
Add Package
yarn add sweetalert2 --save
Remove Package
yarn remove sweetalert2 or you can remove package by removing specific package from package.json .
Examples
Title Example
A Basic Message
showAlert() {
    Swal.fire("Any fool can use a computer!");
}
A Title with a Text Under
position() {
Swal.fire({
    position: "top-end",
    icon: "success",
    title: "Your work has been saved",
    showConfirmButton: false,
    timer: 1500,
});
}
A Success message!
successmsg() {
    Swal.fire("Good job!", "You clicked the button!", "success");
}
A Modal with a title, an error icon, a text, and a footer
saError() {
    Swal.fire({
      title: "Oops...",
      text: "Something went wrong!",
      icon: "error",
      confirmButtonClass: "btn btn-primary w-xs mt-2",
      buttonsStyling: false,
      footer: 'Why do I have this issue?',
      showCloseButton: true,
    });
}
A Modal window with a long content inside
content() {
    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: true,
    });
}
A Warning message, with a function attached to the "Confirm"-button...
confirm() {
    Swal.fire({
      title: "Are you sure?",
      text: "You won't be able to revert this!",
      icon: "warning",
      showCancelButton: true,
      confirmButtonColor: "#34c38f",
      cancelButtonColor: "#f46a6a",
      confirmButtonText: "Yes, delete it!",
    }).then((result) => {
      if (result.value) {
        Swal.fire("Deleted!", "Your file has been deleted.", "success");
      }
    });
}
By passing a parameter, you can execute something else for "Cancel".
cancel() {
    const swalWithBootstrapButtons = Swal.mixin({
      customClass: {
        confirmButton: "btn btn-success",
        cancelButton: "btn btn-danger ml-2",
      },
      buttonsStyling: false,
    });

    swalWithBootstrapButtons
      .fire({
        title: "Are you sure?",
        text: "You won't be able to revert this!",
        icon: "warning",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "No, cancel!",
        showCancelButton: true,
      })
      .then((result) => {
        if (result.value) {
          swalWithBootstrapButtons.fire(
            "Deleted!",
            "Your file has been deleted.",
            "success"
          );
        } else if (
          /* Read more about handling dismissals below */
          result.dismiss === Swal.DismissReason.cancel
        ) {
          swalWithBootstrapButtons.fire(
            "Cancelled",
            "Your imaginary file is safe :)",
            "error"
          );
        }
      });
}
A message with custom Image Header.
imageHeader() {
    Swal.fire({
      title: "Sweet!",
      text: "Modal with a custom image.",
      imageUrl: require("@/assets/images/logo-dark.png"),
      imageHeight: 20,
      confirmButtonColor: "#556ee6",
    });
}
A message with auto close timer.
timer() {
    let timerInterval;
    Swal.fire({
      title: "Auto close alert!",
      html: "I will close in  milliseconds.",
      timer: 2000,
      timerProgressBar: true,
      onBeforeOpen: () => {
        Swal.showLoading();
        timerInterval = setInterval(() => {
          Swal.getContent().querySelector("b").textContent =
            Swal.getTimerLeft();
        }, 100);
      },
      onClose: () => {
        clearInterval(timerInterval);
      },
    }).then((result) => {
      if (
        /* Read more about handling dismissals below */
        result.dismiss === Swal.DismissReason.timer
      ) {
        console.log("I was closed by the timer"); // eslint-disable-line
      }
    });
}
Custom HTML description and buttons.
custom() {
    Swal.fire({
      title: "HTML example",
      icon: "info",
      html:
        "You can use bold text, " +
        'links ' +
        "and other HTML tags",
      showCancelButton: true,
      confirmButtonClass: "btn btn-success me-2",
      cancelButtonClass: "btn btn-danger",
      buttonsStyling: false,
      confirmButtonText:
        ' Great!',
      cancelButtonText: '',
    });
}
A dialog with three buttons.
threeButton() {
    Swal.fire({
      title: "Do you want to save the changes?",
      showDenyButton: true,
      showCancelButton: true,
      confirmButtonText: "Save",
      confirmButtonClass: "btn btn-success w-xs me-2",
      cancelButtonClass: "btn btn-danger w-xs",
      denyButtonClass: "btn btn-info w-xs me-2",
      buttonsStyling: false,
      denyButtonText: "Don't save",
      showCloseButton: true,
    }).then(function (result) {
      /* Read more about isConfirmed, isDenied below */
      if (result.isConfirmed) {
        Swal.fire({
          title: "Saved!",
          icon: "success",
          confirmButtonClass: "btn btn-primary w-xs",
          buttonsStyling: false,
        });
      } else if (result.isDenied) {
        Swal.fire({
          title: "Changes are not saved",
          icon: "info",
          confirmButtonClass: "btn btn-primary w-xs",
          buttonsStyling: false,
        });
      }
    });
}
A custom positioned dialog.
position() {
    Swal.fire({
      position: "top-end",
      icon: "success",
      title: "Your work has been saved",
      showConfirmButton: false,
      timer: 1500,
    });
}
A message with custom width, padding and background.
customBackground() {
    Swal.fire({
      title: "Custom width, padding, background.",
      width: 600,
      padding: 100,
      confirmButtonColor: "#556ee6",
      background:
        "#fff url(//subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/geometry.png)",
    });
}
Ajax request example.
ajax() {
    Swal.fire({
      title: "Submit email to run ajax request",
      input: "email",
      showCancelButton: true,
      confirmButtonText: "Submit",
      showLoaderOnConfirm: true,
      confirmButtonColor: "#556ee6",
      cancelButtonColor: "#f46a6a",
      preConfirm: (email) => {
        // eslint-disable-next-line no-unused-vars
        return new Promise(function (resolve, reject) {
          setTimeout(function () {
            if (email === "taken@example.com") {
              Promise.reject(new Error("This email is already taken."));
            } else {
              resolve();
            }
          }, 2000);
        });
      },
      allowOutsideClick: false,
    }).then((email) => {
      Swal.fire({
        title: "Ajax request finished!",
        html: "Submitted email: " + email,
      });
    });
}
© Velzon.
Design & Develop by Themesbrand