Showing the alert

After importing the files into your application, you can call the swal function (make sure it's called after the DOM has loaded!)

Preview Alert

swal("Hello world!");

If you pass two arguments, the first one will be the modal's title, and the second one its text.

Preview Alert

swal("Here's the title!", "...and here's the text!");

And with a third argument, you can add an icon to your alert! There are 4 predefined ones: "warning", "error", "success"and "info".

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

This comes in handy if you want to warn the user before they perform a dangerous action. We can make our alert even better by setting some more options:

• iconcan be set to the predefined "warning"to show a nice warning icon.
• By setting buttons(plural) to true, SweetAlert will show a cancel button in addition to the default confirm button.
• By setting dangerModeto true, the focus will automatically be set on the cancel button instead of the confirm button, and the confirm button will be red instead of blue to emphasize the dangerous action.

Preview Danger Mode

swal({  title: "Are you sure?",  text: "Once deleted, you will not be able to recover this imaginary file!",  icon: "warning",  buttons: true,  dangerMode: true,}).then((willDelete) =>{  if (willDelete) {    swal("Poof! Your imaginary file has been deleted!", {      icon: "success",    });  } else {    swal("Your imaginary file is safe!");  }});

swal({  text: 'Search for a movie. e.g. "La La Land".',  content: "input",  button: {    text: "Search!",    closeModal: false  }}).then(function (willDelete) {  if (willDelete) {    swal("Poof! Your imaginary file has been deleted!", {      icon: "success"    });  } else {    swal("Your imaginary file is safe!");  }});