AvalynxAlert is a lightweight JavaScript notification library that provides customizable, positioned alerts to enhance user feedback in your applications.
It integrates with Bootstrap 5.3 or higher, giving you a range of alert options and complete control over their appearance and behavior.
How to use it:
1. To get started, make sure you have the latest Bootstrap 5 framework installed in your project.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
2. Load the AvalynxAlert’s JavaScript and Stylesheet.
<link href="/dist/css/avalynx-alert.css" rel="stylesheet"> <script src="/dist/js/avalynx-alert.js"></script>
3. You can also install and import the AvalynxAlert with NPM.
# NPM $ npm install avalynx-alert
import { AvalynxAlert } from 'avalynx-alert';
import 'avalynx-alert/dist/css/avalynx-alert.min.css';
4. Create a new AvalynxAlert instance, define the alert message, and specify the notification type (primary, secondary, success, danger, warning, info, light, or dark) as follows:
new AvalynxAlert('Alert Message Here', 'success');
5. Customize the alert message by overriding the default options listed blow:
new AvalynxAlert('Alert Message', 'success',{
// auto-dismiss after this timeout
duration: 5000,
autoClose: true,
// 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'. Default is 'top-center'
position: 'top-center',
// is dismissable?
closeable: true,
// max width of the alert box
width: '400px',
// callback
onClose: null,
}),
Changelog:
v0.0.9 (03/08/2025)
- assetscomposer.json added
v0.0.8 (05/29/2024)
- Bugfix
v0.0.6 (05/27/2024)
- Code optimization
The post Advanced Alert Notification System For Bootstrap 5 – AvalynxAlert.js appeared first on CSS Script.