Easy & Sleek Alert Notifications With UIWebAlerts

Category: Javascript , Notification | March 22, 2024
Views Total:114 views
Official Page:Go to website
Last Update:March 22, 2024


Easy & Sleek Alert Notifications With UIWebAlerts


UIWebAlerts is a super lightweight JavaScript library that adds slick alert notifications to your website.

It comes with four built-in notification types: success, info, warning, and error. Each type has a distinct visual style to clearly communicate the message. You can even add custom icons to further personalize the alerts.

How to use it:

1. Download the package and load the following files in the document.

<link rel="stylesheet" href="ui-webalerts.css">
<script src="ui-webalerts.js"></script>

2. Initialize the UIWebAlerts.

const webalerts = new UIWebAlerts();

3. Set the path to notification icons.


4. Call the createAlert() method and pass in the type of alert you want, along with the message you want to display.

webalerts.createAlert("success", "Sccess alert");
webalerts.createAlert("info", "Info alert");
webalerts.createAlert("warning", "Warning alert");
webalerts.createAlert("error", "Error alert");

5. By default, the alerts will automatically dismiss themselves after 5 seconds, but you can override this duration when you call the createAlert() method by passing in a third parameter.

webalerts.createAlert("success", "Sccess alert", 3000);
webalerts.createAlert("info", "Info alert", 1000);
webalerts.createAlert("warning", "Warning alert", 2000);
webalerts.createAlert("error", "Error alert", 2500);

You Might Be Interested In:

Leave a Reply