SweetAlert 2

Basic Message

A simple modal with a text message and an 'OK' button.

Swal.fire('Hello world!');

Success Message

A modal with a success icon and a custom message to confirm an action.

Swal.fire("Good job!", "You clicked the button!", "success");

Warning Message

An alert with a warning icon, useful for cautioning users before they proceed.

Swal.fire("Careful!", "This is a warning!", "warning");

Error Message

A modal with an error icon to notify users that something went wrong.

Swal.fire("Oops...", "Something went wrong!", "error");

Info Message

A clean modal for providing neutral information or context to the user.

Swal.fire("FYI", "Some info for you.", "info");

Question Message

An alert with a question mark icon, typically used for simple confirmations.

Swal.fire("Are you sure?", "", "question");

Confirmation Dialog

A more complex dialog with confirm and cancel buttons, handling user interaction results.

Swal.fire({
  title: "Are you sure?",
  showCancelButton: true,
  confirmButtonText: "Yes",
  icon: "warning"
});

Input Prompt

A modal that requests text input from the user with built-in validation.

Swal.fire({
  title: "Enter your name",
  input: "text",
  showCancelButton: true,
  inputValidator: (value) => {
    if (!value) return "You need to write something!";
  }
});

Ajax / Loading

Demonstrates an asynchronous operation with a loading spinner and a success callback.

Swal.fire({
  title: "Loading...",
  html: "Please wait...",
  allowOutsideClick: false,
  didOpen: () => {
    Swal.showLoading();
    setTimeout(() => {
      Swal.fire("Done!", "Ajax request finished", "success");
    }, 2000);
  }
});