SweetAlert

  1. Home
  2. SweetAlert
Showing an alert

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

swal ("Hello world!");

Preview

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

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

Preview

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");

Preview
Using options

The last example can also be rewritten using an object as the only parameter:

swal({

 ; title: "Good job!",

  text: "You clicked the button!",

  icon: "success",

});

Preview

With this format, we can specify many more options to customize our alert. For example we can change the text
on the confirm button to "Aww yiss!":

swal({

  title: "Good job!",

  text: "You clicked the button!",

  icon: "success",

  button: "Aww yiss!",

});

Preview

You can even combine the first syntax with the second one, which might save you some typing:

swal({

  title: "Good job!", "You clicked the button!", "success", {

  button: "Aww yiss!",

});

Using promises

SweetAlert uses promises to keep track of how the user interacts with the alert.

If the user clicks the confirm button, the promise resolves to true. If the alert is dismissed (by clicking outside of it), the promise resolves to null.

swal("Click on either the button or outside the modal.")

 .then((value) => {

   .swall('The returned value is: ${value}');

});

Preview

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:

  •  - icon can 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 dangerMode to 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.

swal({

  title: "Are you sure?",

  text: "Once deleted, you will not be able to recover this imaginary file!",

  icon: "warning",

  button: true,

  dangerMode: true,

})

.then(willDelete) => {

  if(willDelete) {

    swal("Poof! Your imaginary file has been deleted!", {

      icon:"success",

});

  } else {

   swal("Your imaginary file is safe!");

  }

});

Preview
Advanced examples

Customizing buttons

So what if you need more than just a cancel and a confirm button? Don't worry, SweetAlert's got you covered!

By specifying an object for buttons, you can set exactly as many buttons as you like, and specify the value
that they resolve to when they're clicked!

In the example below, we set 3 buttons:

  •  - cancel, which by default resolves to null and has a custom "Run away!" text.

  •  - catch, which will resolve to the value we've specified ("catch") and has the custom text "Throw Pokéball!".

  •  - defeat. Here, we specify true to let SweetAlert set some default configurations for the button. In this case,
    it will set the text to "Defeat" (capitalized) and the resolved value to defeat. Had we set the cancel
    button to true, it would still resolve to null as expected.

swal("A wild Pikachu appeared! What do you want to do?", {

  buttons: {

    cancel:"Run away!",

    catch: {

      text:"Throw Pokéball!",

      value:"catch",

    catch: },

    defeat:true,

  },

})

.then((value) => {

  switch(value) {

   case "defeat":

     swal("Pikachu fainted! You gained 500 XP!");

     break;

   case "catch":

     swal("Gotcha!", "Pikachu was caught!", "success");

     break;

   default:

     swal("Got away safely!");

  }

});

Preview