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

• 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

  Try me!

          swal({
              title: 'HTML example',
              html:
                'You can use <b>bold text</b>, ' +
                '<a href="//github.com">links</a> ' +
                'and other HTML tags'
          });
        

• jQuery HTML description

  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 will not be able to recover this imaginary file!',
              type: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Yes, delete it!',
              closeOnConfirm: false
          },
          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 will not be able to recover this imaginary file!',
              type: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Yes, delete it!',
              cancelButtonText: 'No, cancel plx!',
              confirmButtonClass: 'confirm-class',
              cancelButtonClass: 'cancel-class',
              closeOnConfirm: false,
              closeOnCancel: false
          },
          function(isConfirm) {
              if (isConfirm) {
                swal(
                  'Deleted!',
                  'Your file has been deleted.',
                  'success'
                );
              } else {
                swal(
                  'Cancelled',
                  'Your imaginary file is safe :)',
                  'error'
                );
              }
          });
        

• A message with a custom icon and CSS animation disabled

  Try me!

          swal({
              title: 'Sweet!',
              text: 'Modal with a custom image.',
              imageUrl: 'images/thumbs-up.jpg',
              animation: false
          });
        

• A message with custom width, padding and background

  Try me!

          swal({
              text: 'Modal with a custom width, padding and background.',
              width: 300,
              padding: 100,
              background: 'url(http://goo.gl/jVlMUC)',
          });
        

• Modal window with input field

  Try me!

          swal({
              title: 'Input something',
              html: '<p><input id="input-field">',
              showCancelButton: true,
              closeOnConfirm: false
          },
          function() {
              swal({
                html:
                  'You entered: <strong>' +
                  $('#input-field').val() +
                  '</strong>'
              });
          });
        

• Ajax request example

  Try me!

          swal({
              title: 'Submit to run ajax request',
              showCancelButton: true,
              confirmButtonText: 'Submit',
              closeOnConfirm: false
          },
          function() {
              swal.disableButtons();
              setTimeout(function() {
                swal('Ajax request finished!');
              }, 2000);
          });
        

Download & install

$ bower install sweetalert2

Method 2: Download the sweetAlert2 CSS and JavaScript files.

1. Initialize the plugin by referencing the necessary files:

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

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:

Contribute

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