buzzbox

🐝 BuzzBox

BuzzBox is a lightweight, elegant, and fully customizable JavaScript UI library for alerts, toasts, confirms, modals, loaders, and progress bars. Designed to be easy to use and visually appealing, BuzzBox supports 5 style variants, theming, flexible positioning, and full programmatic control.

📦 Installation

npm install buzzbox

🚀 Usage

1. Import in your JS

import {
  alert,
  toast,
  confirm,
  modal,
  loader,
  progress
} from "buzzbox";

📣 Alerts

alert.success.filled("Success Message");
alert.danger.outline("Danger Message");
alert.warning.glass("Warning Alert", "#ff0");
alert.info.custom("Custom Info", { background: "#001a33", color: "#d0e9ff" });

✅ Variants: filled, outline, glass, custom, customOutlined
✅ Types: success, danger, warning, info

🔔 Toasts

toast.success.filled("Saved!", "top-right");
toast.warning.outline("Heads up", "bottom-left");
toast.info.custom("Custom Toast", {
  background: "#0277bd",
  textColor: "#e0f7fa",
  borderColor: "#01579b"
}, "top-right");

✅ Positions: top-left, top-right, bottom-left, bottom-right

✅ Confirms

confirm.success.outline("Title", "Are you sure?", () => {
  console.log("Confirmed!");
});

confirm.danger.custom("Warning", "Delete item?", {
  bg: "#1e1a16",
  text: "#fff",
  border: "#e0a34e",
  buttonBg: "#fcbf71",
  buttonText: "#000",
  buttonBorder: "#e0a34e"
}, () => console.log("Deleted"));

🌀 Loaders

loader.show.success.filled("Please wait...", "top-right");
loader.show.warning.outline("Processing...", "bottom-left");
loader.hide();

📊 Progress

progress.info.filled("Uploading...", "forward", "top-left", 3000);
progress.success.custom("Done!", {
  background: "#003300",
  textColor: "#ccffcc",
  borderColor: "#00ff00"
}, "forward", "bottom-right", 3000);

✅ Direction: forward / reverse

🧩 Modals

modal({
  title: "Are you sure?",
  content: "This action cannot be undone.",
  actions: [
    { label: "Confirm", value: "yes", className: "success-btn" },
    { label: "Cancel", value: "no", className: "danger-btn" }
  ]
}).then(result => console.log("Result:", result));