toasty-elegant 🍞

Mindblowing, zero-dependency toast notifications. Animated SVG icons, TypeScript-first, ~3 KB gzipped.

Features

• 🎨 Gorgeous design — dark glass-morphism, glowing accent bar, type-tinted backgrounds
• ✨ Animated SVG icons — draw-in animations per type (no emoji, no fonts needed)
• ⚡ Zero dependencies — no React, no Vue, no CSS imports — works everywhere
• 🔷 TypeScript — fully typed API with declaration files included
• 🌀 Promise API — loading → success/error in one call
• 📍 6 positions — top/bottom × left/center/right
• 📊 Progress bar — animated countdown
• ♿ Accessible — ARIA roles, aria-live regions
• 📦 ESM + CJS + UMD — works with any bundler or plain <script> tag

Installation

npm install toasty-elegant
# or
yarn add toasty-elegant
# or
pnpm add toasty-elegant

Quick Start

import { toast } from "toasty-elegant";

toast("Hello World!");
toast.success("Saved successfully!");
toast.error("Something went wrong.");
toast.warning("Storage almost full.");
toast.info("New update available.");
toast.loading("Uploading…");

API

Basic Options

toast("Message", {
    type: "success", // 'success' | 'error' | 'warning' | 'info' | 'loading' | 'default'
    duration: 4000, // ms — 0 = persistent (never auto-dismisses)
    position: "top-right", // see positions below
    description: "Sub-text shown below the title",
    icon: "🎉", // custom emoji or SVG string — overrides the animated SVG icon
    closable: true, // show × close button
    progress: true, // animated countdown bar at bottom
    onClick: () => {}, // fired when toast body is clicked
    onClose: () => {}, // fired after toast is removed
    id: "my-toast", // stable id for deduplication and updates
});

Positions

top-left    |  top-center    |  top-right
bottom-left |  bottom-center |  bottom-right

Promise API

Automatically transitions from loading → success or error:

toast.promise(fetchData(), {
    loading: "Fetching data…",
    success: (data) => `Got ${data.count} results!`,
    error: (err) => `Failed: ${err.message}`,
});

Update a Toast

Useful for converting a loading toast into a result:

const id = toast.loading("Uploading…");

// later:
toast.update(id, "Upload complete!", { type: "success", duration: 3000 });

Dismiss

const id = toast.success("Hello");
toast.dismiss(id); // dismiss one by id
toast.dismissAll(); // dismiss all visible toasts

CDN — no bundler needed

<script src="https://unpkg.com/toasty-elegant/dist/toasty.umd.js"></script>
<script>
    // window.toast is available directly after the script loads
    toast.success("Works from CDN!");
    toast.promise(fetch("/api/data"), {
        loading: "Loading…",
        success: "Done!",
        error: "Failed.",
    });
</script>

Custom Icon

Pass any emoji or raw SVG string as the icon option:

// emoji
toast("Deploy complete", { icon: "🚀", type: "success" });

// custom SVG
toast("Alert", {
    icon: '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 2l8 16H2L10 2z"/></svg>',
    type: "warning",
});

Styling

The library uses hardcoded dark styles that are fully self-contained — no CSS file to import, no global CSS variables that could conflict with your project. Styles are injected automatically on first use.

To customize appearance, target the class names in your own CSS:

/* Override the card background */
.tg-toast {
    background: #1e1e2e !important;
    border-radius: 18px !important;
}

/* Override the message text color */
.tg-msg {
    color: #cdd6f4 !important;
}

/* Override description text */
.tg-desc {
    color: rgba(205, 214, 244, 0.6) !important;
}

/* Override progress bar opacity */
.tg-prog {
    opacity: 0.6 !important;
}

TypeScript

All types are exported:

import { toast, ToastOptions, ToastType, ToastPosition } from "toasty-elegant";

const opts: ToastOptions = {
    type: "success",
    position: "bottom-right",
    duration: 5000,
};

toast.success("Done!", opts);

License

MIT © Syed Mohiuddin Meshal

🌐 Links

• NPM: https://www.npmjs.com/package/toasty-elegant
• GitHub: https://github.com/meshal10613/toasty-elegant