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