SweetAlert2 Reference

1. Simple Alerts

The quickest way to show an alert — three arguments: title, text, icon.

Swal.fire("Success!", "Operation completed successfully.", "success");
Swal.fire("Error!", "Something went wrong.", "error");
Swal.fire("Warning!", "Please check your input.", "warning");
Swal.fire("Info", "Here is some information.", "info");

2. Object Configuration

For more control, pass an object with named properties.

Swal.fire({
  title: "Custom Alert",
  text: "This uses object configuration with a custom button colour.",
  icon: "info",
  confirmButtonColor: "#6366f1",
  confirmButtonText: "Got it!"
});

3. Confirmation Dialog

Ask the user to confirm before a destructive action. Uses showCancelButton and checks result.isConfirmed in the .then() handler.

Swal.fire({
  title: "Are you sure?",
  text: "This action cannot be undone.",
  icon: "warning",
  showCancelButton: true,
  confirmButtonColor: "#e74c3c",
  confirmButtonText: "Yes, delete it!",
  cancelButtonText: "Cancel"
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire("Deleted!", "The item has been deleted.", "success");
  }
});

4. Input Dialog with Validation

Prompt the user for text input. Use preConfirm to validate before closing, and Swal.showValidationMessage() to display errors.

Swal.fire({
  title: "Enter a name",
  text: "Create a title for this item:",
  input: "text",
  showCancelButton: true,
  inputPlaceholder: "Write something",
  preConfirm: (value) => {
    var clean = value.replace(/<[^>]*>?/gm, '');
    if (!clean) {
      Swal.showValidationMessage("Please enter at least one character");
      return false;
    }
    return clean;
  }
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire("Success!", "You entered: " + result.value, "success");
  }
});

5. Input with Pre-filled Value

Use inputValue to pre-populate the input field — useful for edit/rename dialogs.

Swal.fire({
  title: "Rename File",
  text: "Input new file name",
  input: "text",
  showCancelButton: true,
  inputPlaceholder: "Write something",
  inputValue: "my-document.pdf",
  preConfirm: (value) => {
    if (!value) {
      Swal.showValidationMessage("Please enter at least one character");
      return false;
    }
    return value;
  }
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire("Success!", "File renamed to: " + result.value, "success");
  }
});

6. Timer Auto-Close

Automatically dismiss the alert after a set time. Great for "saved" confirmations that don't need user interaction.

Swal.fire({
  title: "Saved",
  text: "Your changes have been saved.",
  icon: "success",
  timer: 2000,
  showConfirmButton: false
});

7. Programmatic Close

Close any open alert from code using Swal.close(). Useful when an async operation completes.

Swal.fire({
  title: "Loading...",
  text: "Processing your request...",
  icon: "info",
  showConfirmButton: false
});

// Later, when the operation completes:
Swal.close();

8. Chained Alerts

Show a follow-up alert after the user confirms — common for delete flows where you confirm first, then show a success message.

Swal.fire({
  title: "Delete this item?",
  text: "You will not be able to recover it.",
  icon: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!"
}).then((result) => {
  if (result.isConfirmed) {
    // ... perform delete action ...
    Swal.fire({
      title: "Deleted!",
      text: "The item has been removed.",
      icon: "success",
      timer: 1500,
      showConfirmButton: false
    });
  }
});

Quick Reference

Static Methods

Result Object (from .then())