Examples customize buttons of SweetAlert

We also want to show and customize the cancel button, we can instead set buttons to an array of strings, where the first value is the cancel button's text and the second one is the confirm button's text

Example1 : Edit button

 

<!DOCTYPE html>

<html>

    <body>

        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

        <p>Example customize buttons</p>

 

        <button onclick="run()">Run</button>

 

        <script>

 

            function run() {

                swal("Are you sure you want to do this?", {

                    buttons: ["No ", "Yes"],

                });

 

            }

        </script>

    </body>

</html>

 

 Result:

 

 

If you want one of the buttons to just have their default text, you can set the value to true instead of a string:

Example 2:

 

<!DOCTYPE html>

<html>

    <body>

        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

        <p>Example Alert use promises</p>

 

        <button onclick="run()">Run</button>

 

        <script>

 

            function run() {

                swal("Are you sure you want to do this?", {

                    buttons: [" No!", true]

                });

 

            }

        </script>

 

    </body>

</html>

 

Result:

 

 

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!

Example 3: Alert with  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

 

<!DOCTYPE html>

<html>

    <body>

        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

        <p>Example Alert use promises</p>

 

        <button onclick="run()">Run</button>

 

        <script>

            function run() {

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

                    buttons: {

                      cancel: "Run away!",

                      catch: {

                        text: "Throw Pokéball!",

                        value: "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!");

                      }

                    });

            }

        </script>

 

    </body>

</html>

 

Result:

 

 

Click Run away!:

 

 

Click Throw Pekeball:

 

 

Click Defeat: