Logo

SweetAlert2

Stockholm-icons / General / Search Created with Sketch.
Stockholm-icons / Communication / Group-chat Created with Sketch.
Sean UX Designer
S

Search Job

Job Management System
Stockholm-icons / General / Search Created with Sketch.
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Media / Rec Created with Sketch.

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 12 messages

Recent Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo