SweetAlert2

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

alert('Oops! Something went wrong!')

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

  Try me!

  swal('Any fool can use a computer')

• A title with a text under

  Try me!

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

• A success message!

  Try me!

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

• A message with auto close timer

  Try me!

  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

  Try me!

  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 )

  Try me!

  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...

  Try me!

  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".

  Try me!

  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

  Try me!

  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

  Try me!

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

• Ajax request example

  Try me!

  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

  Try me!

  swal.setDefaults({
    input: 'text',
    confirmButtonText: 'Next →',
    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

  Try me!

  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()
          })
      })
    }
  }])

$ bower install sweetalert2

$ npm install sweetalert2

<!-- for IE and Android native browser support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>

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

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

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

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

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

Modal Types

Input Types

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

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

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

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

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

// 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
  })
})

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

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

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

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