SweetAlert2

A beautiful and customizable replacement for JavaScript's popup boxes

Supported fork of t4t5/sweetalert

Download CDN

Here’s a comparison of a standard error message. The first one uses the built-in alert-function, while the second is using SweetAlert2.

Normal alert

Code:
alert('Oops! Something went wrong!')

SweetAlert2

Code:
sweetAlert()
  'Oops...',
  'Something went wrong!',
  'error'
)

Pretty cool huh? SweetAlert2 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 customizeable, as you can see below!

More examples

In these examples, we're using the shorthand function swal.

Download & install

$ bower install sweetalert2

Or

$ npm install sweetalert2

Or download from CDN: jsdelivr.com/sweetalert2

  1. Initialize the plugin by referencing the necessary files:

    <script src="bower_components/sweetalert2/dist/sweetalert2.min.js"></script>
    <link rel="stylesheet" href="bower_components/sweetalert2/dist/sweetalert2.min.css">
    
    <!-- for IE support -->
    <script src="bower_components/es6-promise/promise.min.js"></script>
  2. Call the sweetAlert2-function after the page has loaded

    swal({
      title: 'Error!',
      text: 'Do you want to continue',
      type: 'error',
      confirmButtonText: 'Cool'
    })

Configuration

Here are the keys that you can use if you pass an object into sweetAlert2:

Argument Default value Description
title null The title of the modal. It can either be added to the object under the key "title" or passed as the first parameter of the function.
text null A description for the modal. It can either be added to the object under the key "text" or passed as the second parameter of the function.
html null A HTML description for the modal. If "text" and "html" parameters are provided in the same time, "text" will be used.
type null The type of the modal. SweetAlert2 comes with 5 built-in types which will show a corresponding icon animation: warning, error, success, info and question. It can either be put in the array under the key "type" or passed as the third parameter of the function.
customClass null A custom CSS class for the modal.
animation true If set to false, modal CSS animation will be disabled.
allowOutsideClick true If set to false, the user can't dismiss the modal by clicking outside it.
allowEscapeKey true If set to false, the user can't dismiss the modal by pressing the Escape key.
showConfirmButton true If set to false, a "Confirm"-button will not be shown. It can be useful when you're using custom HTML description.
showCancelButton false If set to true, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.
confirmButtonText "OK" Use this to change the text on the "Confirm"-button.
cancelButtonText "Cancel" Use this to change the text on the "Cancel"-button.
confirmButtonColor "#3085d6" Use this to change the background color of the "Confirm"-button (must be a HEX value).
cancelButtonColor "#aaa" Use this to change the background color of the "Cancel"-button (must be a HEX value).
confirmButtonClass null A custom CSS class for the "Confirm"-button.
cancelButtonClass null A custom CSS class for the "Cancel"-button.
buttonsStyling true Apply default swal2 styling to buttons. If you want to use your own classes (e.g. Bootstrap classes) set this parameter to false.
reverseButtons false Set to true if you want to invert default buttons positions.
showCloseButton false Set to true to show close button in top right corner of the modal.
showLoaderOnConfirm false Set to true to disable buttons and show that something is loading. Useful for AJAX requests.
preConfirm null Function to execute before confirm, should return Promise, see usage example.
imageUrl null Add a customized icon for the modal. Should contain a string with the path or URL to the image.
imageWidth null If imageUrl is set, you can specify imageWidth to describes image width in px.
imageHeight null Custom image height in px.
imageClass null A custom CSS class for the customized icon.
timer null Auto close timer of the modal. Set in ms (milliseconds).
width 500 Modal window width, including paddings (box-sizing: border-box).
padding 20 Modal window padding.
background "#fff" Modal window background (CSS background property).
input null Input field type, can be text, email, password, textarea, select, radio, checkbox and file.
inputPlaceholder "" Input field placeholder.
inputValue "" Input field initial value.
inputOptions {} or Promise If input parameter is set to "select" or "radio", you can provide options. Object keys will represent options values, object values will represent options text values.
inputAutoTrim true Automatically remove whitespaces from both ends of a result string. Set this parameter to false to disable auto-trimming.
inputValidator null Validator for input field, should return Promise, see usage example.
inputClass null A custom CSS class for the input field.
onOpen null Function to run when modal opens, provides modal DOM element as first param.
onClose null Function to run when modal closes, provides modal DOM element as first param.

You can redefine default params by using swal.setDefaults(customParams).

Modal Types

Input Types

Multiple inputs aren't supported, you can achieve them by using html and preConfirm parameters.
Notice that in preConfirm function you can pass the custom result to resolve():

Methods

Method Description
swal.setDefaults({Object}) If you end up using a lot of the same settings when calling SweetAlert2, you can use setDefaults at the start of your program to set them once and for all!
swal.resetDefaults() Resets settings to their default value.
swal.queue([Array]) Provide array of SweetAlert2 parameters to show multiple modals, one modal after another. See usage example
swal.close() or swal.closeModal() Close the currently open SweetAlert2 modal programmatically.
swal.enableButtons() Enable confirm and cancel buttons.
swal.disableButtons() Disable confirm and cancel buttons.
swal.showLoading() or swal.enableLoading() Disable buttons and show loader. This is useful with AJAX requests.
swal.hideLoading() or swal.disableLoading() Enable buttons and hide loader.
swal.clickConfirm() Click "Confirm"-button programmatically.
swal.clickCancel() Click "Cancel"-button programmatically.
swal.showValidationError(error) Show validation error message.
swal.resetValidationError() Hide validation error message.
swal.enableInput() Enable input, this method works with input parameter.
swal.disableInput() Disable input.

Contribute

Feel free to fork SweetAlert2 on GitHub if you have any features that you want to add!