Sweet Alerts - Extended UI | Vuexy - Bootstrap 5 Admin Template

Sweet Alerts 2

A Beautiful, Responsive, Customizable, Accessible (WAI-ARIA) Replacement for Javascript's Popup Boxes with Zero Dependencies
Read the official SweetAlert2 Documentation for a full list of instructions and other options.

Usage

In order to use Sweet alerts on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/libs/animate-css/animate.css" />
<link rel="stylesheet" href="assets/vendor/libs/sweetalert2/sweetalert2.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/sweetalert2/sweetalert2.js" />

Info: Find more real-time examples with SweetAlert2 here

Examples

Basic

SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizable, as you can see below!

<button type="button" class="btn btn-primary me-1 mb-1" id="basic-alert">
  Basic
</button>
<button type="button" class="btn btn-primary me-1 mb-1" id="with-title">
  With Title
</button>
<button type="button" class="btn btn-primary me-1 mb-1" id="footer-alert">
  With Footer
</button>
<button type="button" class="btn btn-primary mb-1" id="html-alert">
  HTML
</button>

const basicAlert = document.querySelector('#basic-alert'),
 withTitle = document.querySelector('#with-title'),
 footerAlert = document.querySelector('#footer-alert'),
 htmlAlert = document.querySelector('#html-alert');

// BASIC ALERT
basicAlert.onclick = function() {
  Swal.fire({
    title: 'Any fool can use a computer',
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  });
};

// ALERT WITH TITLE
withTitle.onclick = function() {
  Swal.fire({
    title: 'The Internet?,',
    text: 'That thing is still around?',
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

// ALERT WITH FOOTER
footerAlert.onclick = function() {
  Swal.fire({
    type: 'error',
    title: 'Oops...',
    text: 'Something went wrong!',
    footer: '<a href>Why do I have this issue?</a>',
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

// HTML ALERT
htmlAlert.onclick = function() {
  Swal.fire({
    title: '<strong>HTML <u>example</u></strong>',
    type: 'info',
    html:
      "You can use <b>bold text</b>, " +
      '<a href="https://pixinvent.com/" target="_blank">links</a> ' +
      "and other HTML tags",
    showCloseButton: true,
    showCancelButton: true,
    focusConfirm: false,
    confirmButtonText: '<i class="ti ti-thumb-up"></i> Great!',
    confirmButtonAriaLabel: 'Thumbs up, great!',
    cancelButtonText: '<i class="ti ti-thumb-down"></i>',
    cancelButtonAriaLabel: 'Thumbs down',
    customClass: {
      confirmButton: 'btn btn-primary me-1',
      cancelButton: 'btn btn-label-secondary'
    },
    buttonsStyling: false
  })
}

Positions

You can refer below mentioned table to position your alert

<button class="btn btn-primary me-1 mb-1" id="position-top-start">
  Top Start
</button>
<button class="btn btn-primary me-1 mb-1" id="position-top-end">
  Top End
</button>
<button class="btn btn-primary me-1 mb-1" id="position-bottom-start">
  Bottom Starts
</button>
<button class="btn btn-primary mb-1" id="position-bottom-end">
  Bottom End
</button>

const positionTopStart = document.querySelector('#position-top-start'),
 positionTopEnd = document.querySelector('#position-top-end'),
 positionBottomStart = document.querySelector('#position-bottom-start'),
 positionBottomEnd = document.querySelector('#position-bottom-end');

// TOP START ALERT
positionTopStart.onclick = function() {
  Swal.fire({
    position: 'top-start',
    type: 'success',
    title: 'Your work has been saved',
    showConfirmButton: false,
    timer: 1500,
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

// TOP END ALERT
positionTopEnd.onclick = function() {
  Swal.fire({
    position: 'top-end',
    type: 'success',
    title: 'Your work has been saved',
    showConfirmButton: false,
    timer: 1500,
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

// BOTTOM START ALERT
positionBottomStart.onclick = function() {
  Swal.fire({
    position: 'bottom-start',
    type: 'success',
    title: 'Your work has been saved',
    showConfirmButton: false,
    timer: 1500,
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

// BOTTOM END ALERT
positionBottomEnd.onclick = function() {
  Swal.fire({
    position: 'bottom-end',
    type: 'success',
    title: 'Your work has been saved',
    showConfirmButton: false,
    timer: 1500,
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

Property	Value
`position`	top-start \| top-end \| bottom-start \| bottom-end

Animations

Use showClass parameter to add animation to your alert

<button class="btn btn-primary me-1 mb-1" id="bounce-in-animation">
  Bounce In
</button>
<button class="btn btn-primary me-1 mb-1" id="fade-in-animation">
  Fade In
</button>
<button class="btn btn-primary me-1 mb-1" id="flip-x-animation">
  Flip In
</button>
<button class="btn btn-primary me-1 mb-1" id="tada-animation">
  Tada
</button>
<button class="btn btn-primary mb-1" id="shake-animation">
  Shake
</button>

const bounceInAnimation = document.querySelector('#bounce-in-animation'),
 fadeInAnimation = document.querySelector('#fade-in-animation'),
 flipXAnimation = document.querySelector('#flip-x-animation'),
 tadaAnimation = document.querySelector('#tada-animation'),
 shakeAnimation = document.querySelector('#shake-animation');

// BOUNCE IN ANIMATION
bounceInAnimation.onclick = function() {
  Swal.fire({
    title: 'Bounce In Animation',
    showClass: {
      popup: 'animate__animated animate__bounceIn'
    },
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

// FADE IN ANIMATION
fadeInAnimation.onclick = function() {
  Swal.fire({
    title: 'Fade In Animation',
    showClass: {
      popup: 'animate__animated animate__fadeIn'
    },
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

// FLIP X ANIMATION
flipXAnimation.onclick = function() {
  Swal.fire({
    title: 'Flip In Animation',
    showClass: {
      popup: 'animate__animated animate__flipInX'
    },
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

// TADA ANIMATION
tadaAnimation.onclick = function() {
  Swal.fire({
    title: 'Tada Animation',
    showClass: {
      popup: 'animate__animated animate__tada'
    },
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

// SHAKE ANIMATION
shakeAnimation.onclick = function() {
  Swal.fire({
    title: 'Shake Animation',
    showClass: {
      popup: 'animate__animated animate__shakeX'
    },
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

Types

The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation refer below mentioned table. You can also set it as input to get a prompt modal. It can either be put in the object under the key icon or passed as the third parameter of the function.

<button type="button" class="btn btn-success me-1 mb-1" id="type-success">
  Success
</button>
<button type="button" class="btn btn-info me-1 mb-1" id="type-info">
  Info
</button>
<button type="button" class="btn btn-warning me-1 mb-1" id="type-warning">
  Warning
</button>
<button type="button" class="btn btn-danger mb-1" id="type-error">
  Error
</button>

const iconSuccess = document.querySelector('#type-success'),
 iconInfo = document.querySelector('#type-info'),
 iconWarning = document.querySelector('#type-warning'),
 iconError = document.querySelector('#type-error'),
 iconQuestion = document.querySelector('#type-question');

// SUCCESS ALERT
iconSuccess.onclick = function() {
  Swal.fire({
    title: 'Good job!',
    text: 'You clicked the button!',
    type: 'success',
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

// INFO ALERT
iconInfo.onclick = function() {
  Swal.fire({
    title: 'Info!',
    text: 'You clicked the button!',
    type: 'info',
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

// WARNING ALERT
iconWarning.onclick = function() {
  Swal.fire({
    title: 'Warning!',
    text: ' You clicked the button!',
    type: 'warning',
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

// ERROR ALERT
iconError.onclick = function() {
  Swal.fire({
    title: 'Error!',
    text: ' You clicked the button!',
    type: 'error',
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

// Question Alert
iconQuestion.onclick = function() {
  Swal.fire({
    title: 'Question!',
    text: ' You clicked the button!',
    icon: 'question',
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  });
}

Property	Value
`type`	warning \| error \| success \| info \| question

Options

You can add anything you want in an alert some of the options are follows:

<button type="button" class="btn btn-primary me-1 mb-1" id="custom-image">
  Custom Image
</button>
<button type="button" class="btn btn-primary me-1 mb-1" id="auto-close">
  Auto Close
</button>
<button type="button" class="btn btn-primary me-1 mb-1" id="outside-click">
  Click Outside
</button>
<button type="button" class="btn btn-primary me-1 mb-1" id="progress-steps">
  Progress Steps
</button>
<button type="button" class="btn btn-primary mb-1" id="ajax-request">
  Ajax
</button>

const customImage = document.querySelector('#custom-image'),
 autoClose = document.querySelector('#auto-close'),
 outsideClick = document.querySelector('#outside-click'),
 progressSteps = document.querySelector('#progress-steps'),
 ajaxRequest = document.querySelector('#ajax-request');

// ALERT WITH CUSTOM ICON
customImage.onclick = function() {
  Swal.fire({
    title: 'Sweet!',
    text: 'Modal with a custom image.',
    imageUrl: '...',
    imageWidth: 400,
    imageAlt: 'Custom image',
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

// AUTO CLOSING ALERT
autoClose.onclick = function() {
  var timerInterval
  Swal.fire({
    title: 'Auto close alert!',
    html: 'I will close in <strong></strong> seconds.',
    timer: 2000,
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false,
    willOpen: function() {
      Swal.showLoading()
      timerInterval = setInterval(function() {
        Swal.getHtmlContainer().querySelector('strong').textContent = Swal.getTimerLeft()
      }, 100);
    },
    willClose: function() {
      clearInterval(timerInterval);
    }
  }).then(function(result) {
    if (
      // Read more about handling dismissals
      result.dismiss === Swal.DismissReason.timer
    ) {
      console.log('I was closed by the timer')
    }
  })
}

// CLOSE ALERT ON BACKDROP CLICK
outsideClick.onclick = function() {
  Swal.fire({
    title: 'Click outside to close!',
    text: 'This is a cool message!',
    allowOutsideClick: true,
    backdrop: true,
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
  })
}

// ALERT WITH STEPS
progressSteps.onclick = function() {
  const steps = ['1', '2', '3'];
  const swalQueueStep = Swal.mixin({
    confirmButtonText: 'Forward',
    cancelButtonText: 'Back',
    progressSteps: steps,
    input: 'text',
    inputAttributes: {
      required: true
    },
    validationMessage: 'This field is required'
  });

  async function backAndForward() {
    const values = [];
    let currentStep;

    for (currentStep = 0; currentStep < steps.length; ) {
      const result = await new swalQueueStep({
        title: 'Question ' + steps[currentStep],
        showCancelButton: currentStep > 0,
        currentProgressStep: currentStep
      });

      if (result.value) {
        values[currentStep] = result.value;
        currentStep++;
      } else if (result.dismiss === 'cancel') {
        currentStep--;
      }
    }

    Swal.fire(JSON.stringify(values));
  }

  backAndForward();
};

// ALERT WITH AJAX REQUEST
ajaxRequest.onclick = function() {
  Swal.fire({
    title: 'Submit your Github username',
    input: 'text',
    inputAttributes: {
      autocapitalize: 'off'
    },
    showCancelButton: true,
    confirmButtonText: 'Look up',
    showLoaderOnConfirm: true,
    preConfirm: login => {
      return fetch('//api.github.com/users/' + login)
        .then(response => {
          if (!response.ok) {
            throw new Error(response.statusText);
          }
          return response.json();
        })
        .catch(error => {
          Swal.showValidationMessage('Request failed:' + error);
        });
    },
    backdrop: true,
    allowOutsideClick: () => !Swal.isLoading()
  }).then(result => {
    if (result.isConfirmed) {
      Swal.fire({
        title: result.value.login + "'s avatar",
        imageUrl: result.value.avatar_url,
        customClass: {
          confirmButtonText: 'Close me!',
          confirmButton: 'btn btn-primary'
        }
      });
    }
  });
}

Confirm & Cancel Buttons

You can write a callback function when user click on a certain button.

Confirm Button Action

Confirm & Cancel Button Action

<button="button" class="btn btn-primary" id="confirm-text">
  Alert
</button>
<button="button" class="btn btn-primary" id="confirm-color">
  Alert
</button>

const confirmText = document.querySelector('#confirm-text'),
 confirmColor = document.querySelector('#confirm-color');

// ALERT WITH FUNCTIONAL CONFIRM BUTTON
confirmText.onclick = function() {
  Swal.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!',
    customClass: {
      confirmButton: 'btn btn-primary me-1',
      cancelButton: 'btn btn-label-secondary'
    },
    buttonsStyling: false
  }).then(function(result) {
    if (result.value) {
      Swal.fire({
        icon: 'success',
        title: 'Deleted!',
        text: 'Your file has been deleted.',
        customClass: {
          confirmButton: 'btn btn-success'
        }
      });
    }
  });
}

// ALERT WITH FUNCTIONAL CONFIRM & CANCEL BUTTON
confirmColor.onclick = function() {
  Swal.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!',
    customClass: {
      confirmButton: 'btn btn-primary me-1',
      cancelButton: 'btn btn-label-secondary'
    },
    buttonsStyling: false
  }).then(function(result) {
    if (result.value) {
      Swal.fire({
        icon: 'success',
        title: 'Deleted!',
        text: 'Your file has been deleted.',
        customClass: {
          confirmButton: 'btn btn-success'
        }
      });
    } else if (result.dismiss === Swal.DismissReason.cancel) {
      Swal.fire({
        title: 'Cancelled',
        text: 'Your imaginary file is safe :)',
        icon: 'error',
        customClass: {
          confirmButton: 'btn btn-success'
        }
      });
    }
  });
}