How to Change Button Label in Alert Box using JavaScript?

The alert() function in JavaScript is a useful tool for showing alerts, but it doesn't allow for much customization. One thing that isn't immediately changeable is the button label—which is set to "OK" by default. we will going to discuss some approaches that will help us to change the button label in alert box.

These are the following approaches:

Table of Content

Using Custom HTML, CSS, and JavaScript
Using JavaScript Libraries

Using Custom HTML, CSS, and JavaScript

This method gives you total control over how your alert box appears and feels. Using JavaScript to govern functionality, CSS to style content, and HTML to describe content, you create the complete structure and behavior from scratch.

Example: This code creates a basic custom alert box with a "Close" button. Clicking the button hides the alert box.

JavaScript

<!DOCTYPE html>
<html>

<head>
    <title>Custom Alert Box</title>
    <style>
        /* Style your alert box here */
        #alert-box {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            border: 1px solid #ddd;
            background-color: #f1f1f1;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>

<body>
    <button id="show-alert-button">Show Alert</button>
    <div id="alert-box">
        <p id="alert-message"></p>
        <button id="alert-button">Close</button>
    </div>

    <script>
        function showAlert(message) {
            document.getElementById("alert-message")
                    .textContent = message;
            document.getElementById("alert-box")
                    .style.display = "block";
        }

        function closeAlert() {
            document.getElementById("alert-box")
                    .style.display = "none";
        }

        // Call to show the alert box with a custom message
        document.getElementById("show-alert-button")
                .addEventListener("click", function () {
            showAlert("This is a custom alert with a 'Close' button!");
        });

        // Button click event listener to close the alert box
        document.getElementById("alert-button")
                .addEventListener("click", closeAlert);
    </script>
</body>

</html>

Output:

Output

Using JavaScript Libraries

In this approach, we are using SweetAlert2. With a variety of capabilities, that provides pre-built, customizable alert boxes. we will use that to customize the alert label.

Example: This code utilizes SweetAlert2 to display a custom alert with a title, message, and a button labeled "Got it!" (button color is also changed).

JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>

<body>
    <script src=
"https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <button id="myButton">Click for Custom Alert</button>

    <script>
        document.getElementById("myButton")
                .addEventListener("click", function () {
            Swal.fire({
                title: 'Custom Alert Title!',
                text: 'This is a custom alert from SweetAlert2!',
                confirmButtonColor: '#3085d6',  // Change button color
                confirmButtonText: 'Got it!'  // Change button label
            });
        });
    </script>

</body>

</html>

Output:

Output

Article Tags :

JavaScript

Web Technologies

JavaScript-Questions