Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
A beautiful, responsive, customizable, accessible (wai-aria) replacement for javascript's popup boxes.
For more info please visit the plugin's Demo Page or Github Repo

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, info and question state 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.css animation.


						$('#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 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9