SweetAlert2 - supported fork of t4t5/sweetalert

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

    alert('Oops! Something went wrong!')

#### SweetAlert2

    swal(
      '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

- A basic message

      swal('Any fool can use a computer')

- A title with a text under

      swal(
        'The Internet?',
        'That thing is still around?',
        'question'
      )

- A success message!

      swal(
        'Good job!',
        'You clicked the button!',
        'success'
      )

- A message with auto close timer

      swal({
        title: 'Auto close alert!',
        text: 'I will close in 2 seconds.',
        timer: 2000
      }).then(
        function () {},
        // handling the promise rejection
        function (dismiss) {
          if (dismiss === 'timer') {
            console.log('I was closed by the timer')
          }
        }
      )

- Custom HTML description and buttons

      swal({
        title: '<i>HTML</i> <u>example</u>',
        type: 'info',
        html:
          'You can use <b>bold text</b>, ' +
          '<a href="//github.com">links</a> ' +
          'and other HTML tags',
        showCloseButton: true,
        showCancelButton: true,
        confirmButtonText:
          '<i class="fa fa-thumbs-up"></i> Great!',
        cancelButtonText:
          '<i class="fa fa-thumbs-down"></i>'
      })

- jQuery HTML with custom animation (Animate.css )

      swal({
        title: 'jQuery HTML example',
        html: $('<div>')
          .addClass('some-class')
          .text('jQuery is everywhere.'),
        animation: false,
        customClass: 'animated tada'
      })

- A warning message, with a function attached to the "Confirm"-button...

      swal({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
      }).then(function () {
        swal(
          'Deleted!',
          'Your file has been deleted.',
          'success'
        )
      })

- ... and by passing a parameter, you can execute something else for "Cancel".

      swal({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, cancel!',
        confirmButtonClass: 'btn btn-success',
        cancelButtonClass: 'btn btn-danger',
        buttonsStyling: false
      }).then(function () {
        swal(
          'Deleted!',
          'Your file has been deleted.',
          'success'
        )
      }, function (dismiss) {
        // dismiss can be 'cancel', 'overlay',
        // 'close', and 'timer'
        if (dismiss === 'cancel') {
          swal(
            'Cancelled',
            'Your imaginary file is safe :)',
            'error'
          )
        }
      })

- A message with a custom image and CSS animation disabled

      swal({
        title: 'Sweet!',
        text: 'Modal with a custom image.',
        imageUrl: 'https://unsplash.it/400/200',
        imageWidth: 400,
        imageHeight: 200,
        animation: false
      })

- A message with custom width, padding and background

      swal({
        title: 'Custom width, padding, background.',
        width: 600,
        padding: 100,
        background: '#fff url(//bit.ly/1Nqn9HU)'
      })

- Ajax request example

      swal({
        title: 'Submit email to run ajax request',
        input: 'email',
        showCancelButton: true,
        confirmButtonText: 'Submit',
        showLoaderOnConfirm: true,
        preConfirm: function (email) {
          return new Promise(function (resolve, reject) {
            setTimeout(function() {
              if (email === 'taken@example.com') {
                reject('This email is already taken.')
              } else {
                resolve()
              }
            }, 2000)
          })
        },
        allowOutsideClick: false
      }).then(function (email) {
        swal({
          type: 'success',
          title: 'Ajax request finished!',
          html: 'Submitted email: ' + email
        })
      })

- Chaining modals (queue) example

      swal.setDefaults({
        input: 'text',
        confirmButtonText: 'Next &rarr;',
        showCancelButton: true,
        animation: false,
        progressSteps: ['1', '2', '3']
      })

      var steps = [
        {
          title: 'Question 1',
          text: 'Chaining swal2 modals is easy'
        },
        'Question 2',
        'Question 3'
      ]

      swal.queue(steps).then(function (result) {
        swal.resetDefaults()
        swal({
          title: 'All done!',
          html:
            'Your answers: <pre>' +
              JSON.stringify(result) +
            '</pre>',
          confirmButtonText: 'Lovely!',
          showCancelButton: false
        })
      }, function () {
        swal.resetDefaults()
      })

- Dynamic queue example

      swal.queue([{
        title: 'Your public IP',
        confirmButtonText: 'Show my public IP',
        text:
          'Your public IP will be received ' +
          'via AJAX request',
        showLoaderOnConfirm: true,
        preConfirm: function () {
          return new Promise(function (resolve) {
            $.get('https://api.ipify.org?format=json')
              .done(function (data) {
                swal.insertQueueStep(data.ip)
                resolve()
              })
          })
        }
      }])

### Download & install

    $ bower install sweetalert2

Or

    $ npm install sweetalert2

Or download from CDN: jsdelivr.com/sweetalert2 | cdnjs.com/limonte-sweetalert2

1. Initialize the plugin by referencing the necessary files:

       <!-- for IE support -->
       <script src="bower_components/es6-promise/es6-promise.auto.min.js"></script>

       <script src="bower_components/sweetalert2/dist/sweetalert2.min.js"></script>
       <link rel="stylesheet" href="bower_components/sweetalert2/dist/sweetalert2.min.css">

   Or

       // ES6 Modules
       import { default as swal } from 'sweetalert2'

       // CommonJS
       const swal = require('sweetalert2')

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.
input | null | Input field type, can be text, email, password, number, tel, range, textarea, select, radio, checkbox and file.
width | '500px' | Modal window width, including paddings (box-sizing: border-box). Can be in px or %.
padding | 20 | Modal window padding.
background | '#fff' | Modal window background (CSS background property).
customClass | null | A custom CSS class for the modal.
timer | null | Auto close timer of the modal. Set in ms (milliseconds).
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.
focusCancel | false | Set to true if you want to focus the "Cancel"-button by default.
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.
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.
progressSteps | [] | Progress steps, useful for modal queues, see usage example.
currentProgressStep | null | Current active progress step. The default is swal.getQueueStep()
progressStepsDistance | '40px' | Distance between progress steps.
onOpen | null | Function to run when modal opens, provides modal DOM element as the first argument.
onClose | null | Function to run when modal closes, provides modal DOM element as the first argument.

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

### Handling Dismissals

When an alert is dismissed by the user, the Promise returned by swal() will reject with a string documenting the reason it was dismissed:

String | Description | Related configuration
--- | --- | ---
'overlay' | The user clicked the overlay. | allowOutsideClick
'cancel' | The user clicked the cancel button. | showCancelButton
'close' | The user clicked the close button. | showCloseButton
'esc' | The user clicked the Esc key. | allowEscapeKey
'timer' | The timer ran out, and the alert closed automatically. | timer

If rejections are not handled, it will be logged as an error. To avoid this, add a rejection handler to the Promise.
Alternatively, you can use .catch(swal.noop) as a quick way to simply suppress the errors:

    swal('...')
      .catch(swal.noop)

### Modal Types

success |  |
error |  |
warning | ! |
info | i |
question | ? |

### Input Types

text

    swal({
      title: 'Input something',
      input: 'text',
      showCancelButton: true,
      inputValidator: function (value) {
        return new Promise(function (resolve, reject) {
          if (value) {
            resolve()
          } else {
            reject('You need to write something!')
          }
        })
      }
    }).then(function (result) {
      swal({
        type: 'success',
        html: 'You entered: ' + result
      })
    })

email

    swal({
      title: 'Input email address',
      input: 'email'
    }).then(function (email) {
      swal({
        type: 'success',
        html: 'Entered email: ' + email
      })
    })

password

    swal({
      title: 'Enter your password',
      input: 'password',
      inputAttributes: {
        'maxlength': 10,
        'autocapitalize': 'off',
        'autocorrect': 'off'
      }
    }).then(function (password) {
      if (password) {
        swal({
          type: 'success',
          html: 'Entered password: ' + password
        })
      }
    })

textarea

    swal({
      input: 'textarea',
      showCancelButton: true
    }).then(function (text) {
      if (text) {
        swal(text)
      }
    })

select

    swal({
      title: 'Select Ukraine',
      input: 'select',
      inputOptions: {
        'SRB': 'Serbia',
        'UKR': 'Ukraine',
        'HRV': 'Croatia'
      },
      inputPlaceholder: 'Select country',
      showCancelButton: true,
      inputValidator: function (value) {
        return new Promise(function (resolve, reject) {
          if (value === 'UKR') {
            resolve()
          } else {
            reject('You need to select Ukraine :)')
          }
        })
      }
    }).then(function (result) {
      swal({
        type: 'success',
        html: 'You selected: ' + result
      })
    })

radio

    // inputOptions can be an object or Promise
    var inputOptions = new Promise(function (resolve) {
      setTimeout(function () {
        resolve({
          '#ff0000': 'Red',
          '#00ff00': 'Green',
          '#0000ff': 'Blue'
        })
      }, 2000)
    })

    swal({
      title: 'Select color',
      input: 'radio',
      inputOptions: inputOptions,
      inputValidator: function (result) {
        return new Promise(function (resolve, reject) {
          if (result) {
            resolve()
          } else {
            reject('You need to select something!')
          }
        })
      }
    }).then(function (result) {
      swal({
        type: 'success',
        html: 'You selected: ' + result
      })
    })

checkbox

    swal({
      title: 'Terms and conditions',
      input: 'checkbox',
      inputValue: 1,
      inputPlaceholder:
        'I agree with the terms and conditions',
      confirmButtonText:
        'Continue <i class="fa fa-arrow-right></i>',
      inputValidator: function (result) {
        return new Promise(function (resolve, reject) {
          if (result) {
            resolve()
          } else {
            reject('You need to agree with T&C')
          }
        })
      }
    }).then(function (result) {
      swal({
        type: 'success',
        text: 'You agreed with T&C :)'
      })
    })

file

    swal({
      title: 'Select image',
      input: 'file',
      inputAttributes: {
        accept: 'image/*'
      }
    }).then(function (file) {
      var reader = new FileReader
      reader.onload = function (e) {
        swal({
          imageUrl: e.target.result
        })
      }
      reader.readAsDataURL(file)
    })

range

    swal({
      title: 'How old are you?',
      type: 'question',
      input: 'range',
      inputAttributes: {
        min: 8,
        max: 120,
        step: 1
      },
      inputValue: 25
    })

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

    swal({
      title: 'Multiple inputs',
      html:
        '<input id="swal-input1" class="swal2-input" autofocus>' +
        '<input id="swal-input2" class="swal2-input">',
      preConfirm: function () {
        return new Promise(function (resolve) {
          resolve([
            $('#swal-input1').val(),
            $('#swal-input2').val()
          ])
        })
      }
    }).then(function (result) {
      swal(JSON.stringify(result))
    }).catch(swal.noop)

### Methods

Method | Description
--- | ---
swal.isVisible() | Determine if modal is shown.
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.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.enableConfirmButton() | Enable the "Confirm"-button only.
swal.disableConfirmButton() | Disable the "Confirm"-button only.
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 the "Confirm"-button programmatically.
swal.clickCancel() | Click the "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.
swal.queue([Array]) | Provide array of SweetAlert2 parameters to show multiple modals, one modal after another. See usage example
swal.getQueueStep() | Get the index of current modal in queue. When there's no active queue, null will be returned.
swal.insertQueueStep() | Insert a modal to queue, you can specify modal positioning with second parameter. By default a modal will be added to the end of a queue.
swal.deleteQueueStep(index) | Delete a modal at index from queue.
swal.getProgressSteps() | Progress steps getter.
swal.setProgressSteps([]) | Progress steps setter.
swal.showProgressSteps() | Show progress steps.
swal.hideProgressSteps() | Hide progress steps.

### Contribute

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