Sweet Alerts - Extended UI | Materialize - Material Design HTML 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 waves-effect waves-light'
    },
    buttonsStyling: false
  });
};

// ALERT WITH TITLE
withTitle.onclick = function() {
  Swal.fire({
    title: 'The Internet?,',
    text: 'That thing is still around?',
    customClass: {
      confirmButton: 'btn btn-primary waves-effect waves-light'
    },
    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 waves-effect waves-light'
    },
    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="ri-thumb-up-line me-2"></i> Great!',
    confirmButtonAriaLabel: 'Thumbs up, great!',
    cancelButtonText: '<i class="ri-thumb-down-line"></i>',
    cancelButtonAriaLabel: 'Thumbs down',
    customClass: {
      confirmButton: 'btn btn-primary me-1 waves-effect waves-light',
      cancelButton: 'btn btn-outline-secondary waves-effect'
    },
    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 waves-effect waves-light'
    },
    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 waves-effect waves-light'
    },
    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 waves-effect waves-light'
    },
    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 waves-effect waves-light'
    },
    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 waves-effect waves-light'
    },
    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 waves-effect waves-light'
    },
    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 waves-effect waves-light'
    },
    buttonsStyling: false
  })
}

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

// SHAKE ANIMATION
shakeAnimation.onclick = function() {
  Swal.fire({
    title: 'Shake Animation',
    showClass: {
      popup: 'animate__animated animate__shakeX'
    },
    customClass: {
      confirmButton: 'btn btn-primary waves-effect waves-light'
    },
    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 waves-effect waves-light'
    },
    buttonsStyling: false
  })
}

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

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

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

// Question Alert
iconQuestion.onclick = function() {
  Swal.fire({
    title: 'Question!',
    text: ' You clicked the button!',
    icon: 'question',
    customClass: {
      confirmButton: 'btn btn-primary waves-effect waves-light'
    },
    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 waves-effect waves-light'
    },
    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 waves-effect waves-light'
    },
    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 waves-effect waves-light'
    },
    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 waves-effect waves-light'
        }
      });
    }
  });
}

Confirm & Cancel Buttons#

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

Confirm Button Action

Confirm & Cancel Button Action

<button type="button" class="btn btn-primary" id="confirm-text">
  Alert
</button>
<button type="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 waves-effect waves-light',
      cancelButton: 'btn btn-outline-secondary waves-effect'
    },
    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 waves-effect'
        }
      });
    }
  });
}

// 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 waves-effect waves-light',
      cancelButton: 'btn btn-outline-secondary waves-effect'
    },
    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 waves-effect'
        }
      });
    } else if (result.dismiss === Swal.DismissReason.cancel) {
      Swal.fire({
        title: 'Cancelled',
        text: 'Your imaginary file is safe :)',
        icon: 'error',
        customClass: {
          confirmButton: 'btn btn-success waves-effect'
        }
      });
    }
  });
}