Toastr.js is a great libray for showing toast-style notifications that inform users of updates, errors, or successful action in web application, You can use npm orCDN
Test toastr.js & get Notification.
Clicked each below Button & look at the top right position Show Success Notification
Show Error Notification
Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toastr Notification Example</title>
<!-- jQuery CDN (Required for Toastr) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Toastr CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<!-- Toastr JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</head>
<body>
<button class="notify-btn" id="success-btn">Show Success Notification</button>
<button class="notify-btn" id="error-btn">Show Error Notification</button>
<script>
// Configure Toastr options
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": true,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000", // Duration before auto-hiding
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
document.getElementById("success-btn").addEventListener("click",()=>{
toastr.success("Data save successfully", 'Success');
});
document.getElementById("error-btn").addEventListener("click",()=>{
toastr.error("Warning ", 'Error');
});
</script>
</body>
</html>
Explanation
toastr.options: object is used to configure global settings for how notifications should behave and appear across your application. toastr.success: method is used to display success notifications.toastr.error: method is used to display error notifications
