Logo

Base Examples

Basic alert.


                        $("#kt_sweetalert_demo_1").click(function(e) {
                            Swal.fire("Good job!");
                        });
                        

Alert title and text.


                        $("#kt_sweetalert_demo_2").click(function(e) {
                            Swal.fire("Here's the title!", "...and here's the text!");
                        });
                        

State Icons

Enable warning, error, success, infoand questionstate icons


                        $("#kt_sweetalert_demo_3_1").click(function(e) {
                            Swal.fire("Good job!", "You clicked the button!", "warning");
                        });

                        $("#kt_sweetalert_demo_3_2").click(function(e) {
                            Swal.fire("Good job!", "You clicked the button!", "error");
                        });

                        $("#kt_sweetalert_demo_3_3").click(function(e) {
                            Swal.fire("Good job!", "You clicked the button!", "success");
                        });

                        $("#kt_sweetalert_demo_3_4").click(function(e) {
                            Swal.fire("Good job!", "You clicked the button!", "info");
                        });

                        $("#kt_sweetalert_demo_3_5").click(function(e) {
                            Swal.fire("Good job!", "You clicked the button!", "question");
                        });
                        

Customization Examples

Change confirm button text and class.


      $("#kt_sweetalert_demo_4").click(function (e) {
       Swal.fire({
        title: "Good job!",
        text: "You clicked the button!",
        icon: "success",
        buttonsStyling: false,
        confirmButtonText: "Confirm me!",
        customClass: {
         confirmButton: "btn btn-primary"
        }
       });
      });
      

Custom button with icon.


      $("#kt_sweetalert_demo_5").click(function (e) {
       Swal.fire({
        title: "Good job!",
        text: "You clicked the button!",
        icon: "success",
        buttonsStyling: false,
        confirmButtonText: "<i class='la la-headphones'></i> I am game!",
        showCancelButton: true,
        cancelButtonText: "<i class='la la-thumbs-down'></i> No, thanks",
        customClass: {
         confirmButton: "btn btn-danger",
         cancelButton: "btn btn-default"
        }
       });
      });
                        

A custom positioned dialog with timer to auto close.


                        $("#kt_sweetalert_demo_6").click(function(e) {
                            Swal.fire({
                                position: "top-right",
                                icon: "success",
                                title: "Your work has been saved",
                                showConfirmButton: false,
                                timer: 1500
                            });
                        });
                        

Customization Examples

jQuery HTML with custom animate.cssanimation.


      $('#kt_sweetalert_demo_7').click(function (e) {
       Swal.fire({
        title: 'jQuery HTML example',
        showClass: {
            popup: 'animate__animated animate__fadeInDown'
          },
          hideClass: {
            popup: 'animate__animated animate__fadeOutUp'
          }
         });
      });
                        

A warning message, with a function attached to the confirm button.


                        $("#kt_sweetalert_demo_8").click(function(e) {
                            Swal.fire({
                                title: "Are you sure?",
                                text: "You won"t be able to revert this!",
                                icon: "warning",
                                showCancelButton: true,
                                confirmButtonText: "Yes, delete it!"
                            }).then(function(result) {
                                if (result.value) {
                                    Swal.fire(
                                        "Deleted!",
                                        "Your file has been deleted.",
                                        "success"
                                    )
                                }
                            });
                        });
                        

By passing a parameter, you can execute something else for cancel.


                        $("#kt_sweetalert_demo_9").click(function(e) {
                            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!",
                                reverseButtons: true
                            }).then(function(result) {
                                if (result.value) {
                                    Swal.fire(
                                        "Deleted!",
                                        "Your file has been deleted.",
                                        "success"
                                    )
                                    // result.dismiss can be "cancel", "overlay",
                                    // "close", and "timer"
                                } else if (result.dismiss === "cancel") {
                                    Swal.fire(
                                        "Cancelled",
                                        "Your imaginary file is safe :)",
                                        "error"
                                    )
                                }
                            });
                        });
                        

A message with a custom image and CSS animation disabled.


                        $("#kt_sweetalert_demo_10").click(function(e) {
                            Swal.fire({
                                title: "Sweet!",
                                text: "Modal with a custom image.",
                                imageUrl: "https://unsplash.it/400/200",
                                imageWidth: 400,
                                imageHeight: 200,
                                imageAlt: "Custom image",
                                animation: false
                            });
                        });
                        

A message with auto close timer.


                        $("#kt_sweetalert_demo_11").click(function(e) {
                            Swal.fire({
                                title: "Auto close alert!",
                                text: "I will close in 5 seconds.",
                                timer: 5000,
                                onOpen: function() {
                                    Swal.showLoading()
                                }
                            }).then(function(result) {
                                if (result.dismiss === "timer") {
                                    console.log("I was closed by the timer")
                                }
                            })
                        });
                        

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo