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

  Try me!

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

• 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!',
    closeOnConfirm: false
  }).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,
    closeOnConfirm: false,
    closeOnCancel: 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 key pressed 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)'
  })

• Modal window with input field

  Try me!

  swal({
    title: 'Input something',
    html: '<p><input id="input-field">',
    showCancelButton: true,
    closeOnConfirm: false,
    allowEscapeKey: false,
    allowOutsideClick: false
  }).then(function(isConfirm) {
    if (isConfirm) {
      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,
    allowOutsideClick: false
  }).then(function(isConfirm) {
    if (isConfirm) {
      swal.enableLoading();
      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.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'
   })

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

Methods

Contribute

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