SweetAlert 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!

A basic message


  swal("Here's a message!")

A title with a text under


  swal("Here's a message!", "It's pretty, isn't it?")

A Success Alert


  swal({
    title: 'Success',
    icon: 'success'
  })

An Error Message


  swal({
    title: 'Error',
    icon: 'error'
  })
            

A Info Alert


swal({
  title: 'Info',
  icon: 'info'
})
            

An Warning Alert


  swal({
    title: 'Warning',
    icon: 'warning'
  })
            

A success message with button!


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

A Warning Alert with "Confirm" button


  swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    icon: 'warning',
    buttons: {
      cancel: true,
      delete: 'Yes, Delete It'
    }
  })
          

You can execute something else for "Cancel".


  swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    icon: 'warning',
    dangerMode: true,
    buttons: {
      cancel: 'No, Please!',
      delete: 'Yes, Delete It'
    }
  }).then(function (willDelete) {
    if (willDelete) {
      swal("Poof! Your imaginary file has been deleted!", {
        icon: "success",
      });
    } else {
      swal("Your imaginary file is safe", {
        title: 'Cancelled',
        icon: "error",
      });
    }
  });
              

A message with a custom icon


  swal({
    title: "Sweet!",
    text: "Here's a custom image.",
    icon: '../../../app-assets/images/favicon/apple-touch-icon-152x152.png'
  });
              

An HTML message


var el = document.createElement('span'),
t = document.createTextNode("Custom HTML Message!!");
el.style.cssText = 'color:#F6BB42';
el.appendChild(t);
swal({
  title: 'HTML Alert!',
  content: {
    element: el,
  }
});
            

A message with auto close timer


  swal({
    title: "Auto close alert!",
    text: "I will close in 2 seconds.",
    timer: 2000,
    buttons: false
  });
              

A replacement for the "prompt" function


swal("Write something interesting:", {
content: "input",
})
.then((value) => {
  if (value === false) return false;
  if (value === "") {
    swal("You need to write something!", "", "error");
    return false;
  }
  swal(`You typed: ${value}`);
})
                

With a loader (for AJAX request for example)


  swal({
    text: 'Search for a movie. e.g. "La La Land".',
    content: "input",
    button: {
      text: "Search!",
      closeModal: false,
    },
  })
    .then(name => {
      if (!name) throw null;

      return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);
    })
    .then(results => {
      return results.json();
    })
    .then(json => {
      const movie = json.results[0];

      if (!movie) {
        return swal("No movie was found!");
      }

      const name = movie.trackName;
      const imageURL = movie.artworkUrl100;

      swal({
        title: "Top result:",
        text: name,
        icon: imageURL,
      });
    })
    .catch(err => {
      if (err) {
        swal("Oh noes!", "The AJAX request failed!", "error");
      } else {
        swal.stopLoading();
        swal.close();
      }
    });
});
            
settings
close
Theme Customizer

Customize & Preview in Real Time

Navbar Options

Footer Options

add_shopping_cart