Profile

Toast Alert

                  Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    title: 'This is a Toast!',
                    showConfirmButton: false,
                    timer: 1500
                  });
Toast Alert

A Toast-style alert in the top-right corner.

                    Swal.fire({
                      toast: true,
                      position: 'top-left',
                      icon: 'success',
                      title: 'Toast at Top Left!',
                      showConfirmButton: false,
                      timer: 1500
                    });
Toast at Top Left
                    Swal.fire({
                      toast: true,
                      position: 'top-right',
                      icon: 'error',
                      title: 'Toast at Top Right!',
                      showConfirmButton: false,
                      timer: 1500
                    });
Toast at Top Right
                    Swal.fire({
                      toast: true,
                      position: 'bottom-left',
                      icon: 'info',
                      title: 'Toast at Bottom Left!',
                      showConfirmButton: false,
                      timer: 1500
                    });
Toast at Bottom Left
                    Swal.fire({
                      toast: true,
                      position: 'bottom-right',
                      icon: 'warning',
                      title: 'Toast at Bottom Right!',
                      showConfirmButton: false,
                      timer: 1500
                    });
Toast at Bottom Right
                    Swal.fire({
                      toast: true,
                      position: 'center',
                      icon: 'success',
                      title: 'Toast at Center!',
                      showConfirmButton: false,
                      timer: 1500
                    });
Toast at Center
                    Swal.fire({
                      toast: true,
                      position: 'top-start',
                      icon: 'info',
                      title: 'Toast at Top Start!',
                      showConfirmButton: false,
                      timer: 1500
                    });
Toast at Top Start

Simple JS Alert

alert('Welcome to My Magical World!');
Simple Alert

This is a basic JS Alert example.

const confirmed = confirm("Are you sure you want to proceed?");
                                    if (confirmed) {
                                        alert("You confirmed the action!");
                                    } else {
                                        alert("Action canceled.");
                                    }
Simple Confirmation Alert

This is a basic JS Confirmation Alert example.

Sweet Alert

Swal.fire('This is a simple alert!');
Simple Alert

This is a basic SweetAlert example.

Swal.fire('Hello World!',
                                    'This is a SweetAlert!',
                                    'success');
Sweet Alert With Icon

This is a SweetAlert With Icon.

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, keep it',
                                    reverseButtons: true,
                                    confirmButtonColor: "#3085d6",
                                    cancelButtonColor: "#d33",
                            
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        Swal.fire('Deleted!', 'Your file has been deleted.', 'success');
                                    } else if (result.dismiss === Swal.DismissReason.cancel) {
                                        Swal.fire('Cancelled', 'Your file is safe :)', 'error');
                                    }
                                });
Sweet Alert With Icon

This is a SweetAlert With Icon.

let timerInterval;
                                    Swal.fire({
                                        position: "top-end",
                                        title: "Auto close alert!",
                                        html: "I will close in  milliseconds.",
                                        timer: 5000,
                                        timerProgressBar: true,
                                        didOpen: () => {
                                            Swal.showLoading();
                                            const timer = Swal.getPopup().querySelector("b");
                                            timerInterval = setInterval(() => {
                                                timer.textContent = `${Swal.getTimerLeft()}`;
                                            }, 100);
                                        },
                                        willClose: () => {
                                            clearInterval(timerInterval);
                                        }
                                    }).then((result) => {
                                        if (result.dismiss === Swal.DismissReason.timer) {
                                            console.log("I was closed by the timer");
                                        }
                                    });
Sweet Alert With Icon

This is a SweetAlert With Icon.

Swal.fire({
                    title: 'Auto close alert!',
                    timer: 2000,
                  });
Timer Alert

This alert closes automatically after a set time.

                  Swal.fire({
                    title: 'Custom Position!',
                    position: 'top-start',
                    icon: 'info',
                    showConfirmButton: false,
                    timer: 1500
                  });
Custom Position Alert

Show alert in custom position (top-start).

                  Swal.fire({
                    title: 'Enter your name',
                    input: 'text',
                    showCancelButton: true,
                  });
Input Alert

Take input from users with SweetAlert.