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

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() {
    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', '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 === '[email protected]') {
            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({
    confirmButtonText: 'Next →',
    showCancelButton: true,
    animation: false,
    progressSteps: ['1', '2', '3']
  });
  
  var steps = [
    {
      title: 'Step 1',
      text: 'Chaining swal2 modals is easy'
    },
    'Step 2',
    'Step 3'
  ];
  
  swal.queue(steps).then(function() {
    swal({
      title: 'All done!',
      confirmButtonText: 'Lovely!',
      showCancelButton: false
    });
    swal.resetDefaults();
  }, 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();
          });
      });
    }
  }])

Download & install

$ bower install sweetalert2

$ npm install sweetalert2

1. Initialize the plugin by referencing the necessary files:

   <!-- for IE support -->
   <script src="bower_components/es6-promise/es6-promise.min.js"></script>
   
   <script src="bower_components/sweetalert2/dist/sweetalert2.min.js"></script>
   <link rel="stylesheet" href="bower_components/sweetalert2/dist/sweetalert2.min.css">

2. Call the sweetAlert2-function after the page has loaded

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

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" autofocus>' +
    '<input id="swal-input2" class="swal2-input">',
  preConfirm: function() {
    return new Promise(function(resolve) {
      if (result) {
        resolve([
          $('#swal-input1').val(),
          $('#swal-input2').val()
        ]);
      }
    });
  }
}).then(function(result) {
  swal(JSON.stringify(result));
})

Contribute

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