Avizar-js 🚀

A lightweight, modern notification library for JavaScript.

Features Glassmorphism, Pill, and Solid variants, zero dependencies, and a clean dual-level API (simple + advanced).

📦 Installation

Via NPM

npm install avizar-js

Via CDN

<script src="https://unpkg.com/avizar-js@latest/dist/avizar.min.js"></script>

🚀 Quick Start

ES Module

import Avizar from "avizar-js";

Avizar.success("Operation completed successfully");

CDN (Global)

Avizar.info("Welcome to Avizar");

Core Concept

Avizar has two API levels:

1. Simple API (fast usage)

Avizar.success("Saved");
Avizar.error("Something went wrong");
Avizar.warning("Be careful");

2. Advanced API (full control)

Avizar.show({
  type: "success",
  title: "File saved",
  description: "Your progress was stored successfully",
  variant: "glass",
  duration: 5000,
  actions: [
    {
      label: "Open",
      onClick: (id) => console.log("Toast:", id)
    }
  ]
});

🛠 API Usage

🔹 Simple Messages

Avizar.success("Success!");
Avizar.error("Database error");
Avizar.info("New update available");
Avizar.warning("Check your input");

🔹 Title + Description

Avizar.success("Saved", "Your file was stored successfully");
Avizar.error("Upload failed", "Network connection lost");

⚡ Variants (UI Styles)

Avizar supports 3 built-in visual variants:

Glass (default)

Modern blur / glassmorphism style

variant: "glass"

Pill

Compact rounded notification

variant: "pill"

Solid

Flat solid background style

variant: "solid"

🎯 Actions (Interactive Toasts)

Use full object API when actions are needed:

Avizar.show({
  type: "warning",
  title: "Unsaved changes",
  description: "Do you want to leave without saving?",
  variant: "glass",
  actions: [
    {
      label: "Stay",
      onClick: () => console.log("Stay clicked")
    },
    {
      label: "Leave",
      className: "danger",
      onClick: () => console.log("Leaving...")
    }
  ]
});

⚙️ Global Configuration

Avizar.config({
  position: "top-right",
  theme: "auto",      // light | dark | auto
  duration: 4000,
  showProgress: true,
  pauseOnHover: true
});

🎨 Positioning

• top-left
• top-center
• top-right
• bottom-left
• bottom-center
• bottom-right

🧪 Playground

Want to see it in action before installing? Check out the live playground:

👉 https://erilshackle.github.io/avizar-js/

📄 License

MIT © Erilando Carvalho