Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.

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")
                                }
                            })
                        });
                        

Quick Actions finance & reports

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