Pure JS Notification System Inspired by Bootstrap 5 – ZephyrToast

ZephyrToast is a lightweight JavaScript notification library that creates elegant customizable toast notifications inspired by Bootstrap 5 styling.

It delivers a clean solution for displaying transient messages to users without the bloat of larger UI frameworks.

Features:

• Multiple notification types: Success, Info, Warning, Error, Zen, Void
• Six different positioning options: Top-right, Top-left, Bottom-right, Bottom-left, Top-center, Bottom-center
• Customizable animation effects and notification icons
• Progress bar with adjustable duration

How to use it:

1. Download and add the ‘zephyr-toast.js’ script to your webpage.

<script src="zephyr-toast.js"></script>

2. Create a new ‘ZephyrToast’ instance:

const toast = new ZephyrToast();

3. Call the appropriate method based on the notification type:

// success
toast.success("Success Toast");

// error
toast.error("Error Toast");

// warning
Toast.warning("Warning Toast");

// info
toast.info("Info Toast");

// zen toast (light)
toast.zen("Zen Toast");

// void toast (dark)
toast.void("Void Toast");

4. Customize options with an object parameter:

• position: String. Determines where the toast appears: ‘top-right’, ‘top-left’, ‘bottom-right’, ‘bottom-left’, ‘top-center’, ‘bottom-center’
• duration: Number. How long the toast is displayed (in milliseconds).
• title: String. An optional title for the toast.
• showClose: Boolean. Whether to display a close button.
• showProgress: Boolean. Whether to display a progress bar.
• newestOnTop: Boolean. If true, new toasts appear above older ones.
• animation: Object containing in and out properties, allowing different entrance/exit animation. Available animations include: fadeIn, slideInLeft, slideInRight, slideInDown, slideInUp, bounceIn, zoomIn, fadeOut, slideOutLeft, slideOutRight, slideOutDown, slideOutUp, bounceOut, zoomOut.
• icon: Object. Allows adding an image, SVG, or FontAwesome class icon.
• isIcon: Boolean. If set to true, it will prevent the use of custom URLs or image sources
• onClose: function. Callback which fires after toast dissapears.
• onClick: function. Callback which fires after toast is clicked.

toast.success("Operation completed successfully!",{
  position: "top-right", 
  duration: 3000,
  title: "Success",
  showClose: true,
  showProgress: true,
  newestOnTop: true,
  animation: { 
    in: "fadeIn", 
    out: "fadeOut",
  },
  icon: {
    url: "icon.png",
    width: "24px",
    height: "24px",
  },
  isIcon: false,
  onClose: () => console.log("Toast closed"),
  onClick: () => console.log("Toast clicked"),
});

5. Implementation tips.

• Set appropriate duration values based on message importance and length.
• If you’re displaying numerous notifications in quick succession, consider increasing the duration value to prevent overlapping.
• Use the newestOnTop option strategically depending on your application’s context.

Changelog:

v1.3.0 (04/13/2025)

• Added two new toast types: Zen (Light) and Void (Dark)
• Renamed CSS class zephyr_animate__animated to zephyr-animate (removed double underscores and replaced with a single hyphen). This change will not break functionality if new CSS and JS files are replaced.

v1.2.0 (04/04/2025)

• Support for Any Icon Library
• New isIcon Option
• Bugfixes

The post Pure JS Notification System Inspired by Bootstrap 5 – ZephyrToast appeared first on CSS Script.