SweetAlert2

So... What does it do?

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!')

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.

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

• 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

  Try me!

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

• 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(isConfirm) {
    if (isConfirm) {
      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(isConfirm) {
    if (isConfirm === true) {
      swal(
        'Deleted!',
        'Your file has been deleted.',
        'success'
      );
    } else if (isConfirm === false) {
      swal(
        'Cancelled',
        'Your imaginary file is safe :)',
        'error'
      );
    } else {
      // Esc, close button or outside click
      // isConfirm is undefined
    }
  })

• A message with a custom icon 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({
    text: 'Custom width, padding, background.',
    width: 300,
    padding: 100,
    background: '#fff url(//goo.gl/enIitC)'
  })

• Ajax request example

  Try me!

  swal({
    title: 'Submit email to run ajax request',
    input: 'email',
    showCancelButton: true,
    confirmButtonText: 'Submit',
    preConfirm: function() {
      return new Promise(function(resolve) {
        swal.enableLoading();
        setTimeout(function() {
          resolve();
        }, 2000);
      });
    },
    allowOutsideClick: false
  }).then(function(isConfirm) {
    if (isConfirm) {
      swal('Ajax request finished!');
    }
  })

Download & install

$ bower install 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-polyfill/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:

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

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) {
  if (result) {
    swal({
      type: 'success',
      html: 'You entered: ' + result
    });
  }
})

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

swal({
  title: 'Enter your password',
  input: 'password'
  inputAttributes: {
    'maxlength': 10,
    'autocapitalize': 'off',
    'autocorrect': 'off'
  }

}).then(function(result) {
  if (password) {
    swal({
      type: 'success',
      html: 'Entered password: ' + password
    });
  }
})

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

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) {
  if (result) {
    swal({
      type: 'success',
      html: 'You selected: ' + result
    });
  }
})

swal({
  title: 'Select color',
  input: 'radio',
  inputOptions: {
    '#ff0000': 'Red',
    '#00ff00': 'Green',
    '#0000ff': 'Blue'
  },
  inputValidator: function(result) {
    return new Promise(function(resolve, reject) {
      if (result) {
        resolve();
      } else {
        reject('You need to select something!');
      }
    });
  }
}).then(function(result) {
  if (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) {
  if (result) {
    swal({
      type: 'success',
      text: 'You agreed with T&C :)'
    });
  }
})

Methods

Contribute

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