Alert

Overview

An alert is a special type of ARIA live region. Screen readers will announce the text inside the alert, without moving the focus to the alert message. Alerts are usually styled to visually stand out from the rest of the content, to make them obvious when they appear.

Turn on a screen reader to experience this example in action.

HTML Source Code


            
<!---
This component has been adapted from an example provided by the W3C, in accordance with the W3C Software and Document License https://www.w3.org/copyright/software-license-2023/
-->
<div>
    <button type="button" id="alert-trigger" class="primary" >Show alert</button>
    <button type="button" id="alert-success" class="primary" >Show success alert</button>
    <button type="button" id="alert-warn" class="primary" >Show warning alert</button>
    <button type="button" id="alert-error" class="primary" >Show error alert</button>
    <button type="button" id="alert-clear">Clear Alert</button>

</div>
<div id="alert" role="alert"></div>

JavaScript Source Code


            
//This component has been adapted from an example provided by the W3C, in accordance with the W3C Software and Document License https://www.w3.org/copyright/software-license-2023/

window.addEventListener('load', function () {
    document.getElementById('alert-trigger').addEventListener('click', showSimpleAlert);
    document.getElementById('alert-success').addEventListener('click', showSuccessAlert);
    document.getElementById('alert-warn').addEventListener('click', showWarningAlert);
    document.getElementById('alert-error').addEventListener('click', showErrorAlert);
    document.getElementById('alert-clear').addEventListener('click', clearAlert);
});

function showSimpleAlert()
{
    showAlert("This is a simple alert message.");
}
function showSuccessAlert()
{
    var icon = '<i class="fa-solid fa-circle-check icon success"></i>';
    var message = icon+ " " + "This is a success alert message.";
    showAlert(message, "#eaf7e4");
}

function showWarningAlert()
{
    var icon = '<i class="fa-solid fa-circle-xmark icon warning"></i>';
    var message = icon+ " " + "This is a warning alert message.";
    showAlert(message, "#fdedd5");
}

function showErrorAlert()
{
    var icon = '<i class="fa-solid fa-circle-xmark icon error"></i>';
    var message = icon+ " " + "This is an error alert message.";
    showAlert(message, "#ffe2d9");
}

function showAlert(html, bkColor) {
    var alert = document.getElementById('alert');
    if(typeof bkColor == "undefined") bkColor = "#eef2f5";
    alert.innerHTML = html;
    alert.style.backgroundColor = bkColor;
}

function clearAlert() {
    var alert = document.getElementById('alert');
    showAlert("alert cleared");
    setTimeout(function(){ 
        alert.innerHTML = "";
    }, 1000);
}

CSS Source Code


            
/*
This component has been adapted from an example provided by the W3C, in accordance with the W3C Software and Document License https://www.w3.org/copyright/software-license-2023/
*/

[role="alert"] {
    padding: 10px;
    border: 2px solid hsl(206deg 74% 54%);
    border-radius: 4px;
    margin: 10px 0px;
}

[role="alert"]:empty {
    display: none;
}
button { 
    padding: 7px 12px;
    font-size: 15px;
    margin: 4px;
   }
.icon { font-size: 18px;    }
.success { color: green;    }
.warning {color: darkorange;    }
.error { color: red;    }
.primary {     
    background-color: #0464b3;
    color: white;
}

Copy and Paste Full Page Example

Copy and paste the full page source code below into a text editor.

<!DOCTYPE html>
<html lang="en" >
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/js/all.min.js" integrity="sha512-1JkMy1LR9bTo3psH+H4SV5bO2dFylgOy+UJhMus1zF4VEFuZVu5lsi4I6iIndE4N9p01z1554ZDcvMSjMaqCBQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        [role="alert"] {
            padding: 10px;
            border: 2px solid hsl(206deg 74% 54%);
            border-radius: 4px;
            margin: 10px 0px;
        }

[role="alert"]:empty {
            display: none;
        }
        button { padding: 5px 10px;     }
        .icon { font-size: 18px;    }
        .success { color: green;    }
        .warning {color: darkorange;    }
        .error { color: red;    }
        .primary {     
            background-color: #0464b3;
            color: white;
        }
        
    </style>

</head>

<body>
    <div>
        <button type="button" id="alert-trigger" class="primary" >Show alert</button>
        <button type="button" id="alert-success" class="primary" >Show success alert</button>
        <button type="button" id="alert-warn" class="primary" >Show warning alert</button>
        <button type="button" id="alert-error" class="primary" >Show error alert</button>
        <button type="button" id="alert-clear">Clear Alert</button>
    
    </div>
    <div id="alert" role="alert"></div>

function showErrorAlert()
        {
            var icon = '<i class="fa-solid fa-circle-xmark icon error"></i>';
            var message = icon+ " " + "This is an error alert message.";
            showAlert(message, "#ffe2d9");
        }

function showAlert(html, bkColor) {
            var alert = document.getElementById('alert');
            if(typeof bkColor == "undefined") bkColor = "#eef2f5";
            alert.innerHTML = html;
            alert.style.backgroundColor = bkColor;
        }

function clearAlert() {
            var alert = document.getElementById('alert');
            showAlert("alert cleared");
            setTimeout(function(){ 
                alert.innerHTML = "";
            }, 1000);
        }

</script>
</body>

</html>