Kongari-Toast 🍞

Kongari-Toast - Lightly crisp, no extra toppings. Just clean toast notifications. Auto-fade with progress, and type-based icons and color themes. Built for Vanilla JS — and yes, it works perfectly with npm too.

📌 What's New in v2.0.0?

• Dark Mode Support – Sleek toast styling that adapts to dark backgrounds
• New Demo Page – Try out toast examples live
• Bundler Migration – Replaced Rollup with tsup for faster builds and inline CSS

🔍 See CHANGELOG.md for full details

Demo

CHECK HERE!!

Installation

npm

npm install kongari-toast

// main.js (using bundler)
import { Toast } from "kongari-toast";

new Toast("save!", "success");

via CDN

💡 Since v2.0.0, there's no need to load a separate CSS file.
Styles are bundled automatically via inline CSS injection.

<!-- ESM Module -->
<script type="module">
    import { Toast } from "https://cdn.jsdelivr.net/npm/kongari-toast/dist/toast.js";

    new Toast("Saved successfully!", "success");
</script>

Basic Usage

After installing Kongari-Toast via CDN or npm, you can use it like this:

Syntax

new Toast(message, type, options?)

| Parameter | Type | Description | | --------- | -------- | ------------------------------------------------------------------- | | message | string | The text content shown in the toast | | type | string | Toast type: "success", "error", "info", "warning" | | options | object | (Optional) Additional settings (e.g. duration, position etc.) |

Example

new Toast("Data saved!", "success");
new Toast("Oops, something went wrong.", "error");
new Toast("Just so you know...", "info", { duration: 5000 });

Options

| Option | Type | Default | Description | | ---------- | -------- | ---------------- | ------------------------------------------------------------------------------------------------- | | duration | number | 3000ms | How long (ms) the toast stays visible | | position | string | "bottom-right" | Position on the screen: "top-right", "top-left", "bottom-right", "bottom-left" | | mode | string | auto | 　 The default value is auto, which automatically follows the system theme (light or dark). |

The options object is likely to expand in future updates.
Got a feature you'd like to see?　Open an issue — suggestions are always welcome!

Full Example

new Toast("Hello, Kongari-Toast!", "info", {
    duration: 4000,
    position: "bottom-left",
    mode: "dark",
});

Promise Usage

Display toasts that reflect the state of a promise — loading, success, or error.

Toast.promise(
    fetch("/api/save-data"), // your async task
    {
        loading: "Saving...",
        success: "Saved successfully!",
        error: "Failed to save.",
    }
);

Syntax

Toast.promise(promise, messages, options?)

| Parameter | Type | Description | | ---------- | --------- | ------------------------------------------------------------------- | | promise | Promise | The asynchronous task to track | | messages | object | Texts for "loading", "success", and "error" | | options | object | (Optional) Additional settings (e.g. duration, position etc.) |

Example

Toast.promise(
    new Promise((resolve) => setTimeout(resolve, 2000)),
    {
        loading: "loading...",
        success: "success!!!",
        error: "error!",
    },
    { position: "top-right" }
);

A spinner icon is shown while loading — no setup required！

No need to use new Toast() — Toast.promise works directly.

Customization

If you're using Kongari-Toast via npm, you can freely adjust icons, colors, animations, and layout to match your design needs.

Modify Icons and Colors

Edit toastIconMap.js to customize the icons and associated colors for each toast type.

You can use emojis, SVGs, or even image paths — it's totally up to you.

2025 Aoki Mizuki – Developed with 🍭 and a sense of fun.