Toast — Vanilla JS

Installation

npm install @fluix-ui/vanilla @fluix-ui/css

Basic Usage

import { createToaster, fluix } from "@fluix-ui/vanilla";
import "@fluix-ui/css";

// Initialize once — this creates the toast viewport in the DOM
createToaster({ position: "top-right" });

// Fire toasts from anywhere
document.getElementById("save-btn")?.addEventListener("click", () => {
  fluix.success({ title: "Saved!" });
});

Call createToaster() once to mount the viewport. Then use the fluix API from anywhere.

Toaster Configuration

createToaster({
  position: "top-right",
  layout: "stack",
  offset: 24,
  defaults: {
    theme: "dark",
    duration: 6000,
    roundness: 16,
  },
});

Options

Option	Type	Default	Description
position	FluixPosition	"top-right"	Default viewport position
layout	"stack" | "notch"	"stack"	Layout mode
offset	number | string | object	—	Viewport offset
defaults	Partial<FluixToastOptions>	—	Default toast options

Toast Options

fluix.success({
  title: "Saved!",
  description: "Your changes have been saved.",
  duration: 5000,
  theme: "dark",
  roundness: 20,
  fill: "#1a1a2e",
  icon: "✨",
});

Promise Support

fluix.promise(
  fetch("/api/data").then((r) => r.json()),
  {
    loading: { title: "Loading..." },
    success: (data) => ({
      title: "Done!",
      description: `Loaded ${data.length} items`,
    }),
    error: (err) => ({
      title: "Failed",
      description: err.message,
    }),
  }
);

Action Button

fluix.action({
  title: "Item deleted",
  button: {
    title: "Undo",
    onClick: () => fluix.success({ title: "Restored!" }),
  },
});

CDN Usage

The vanilla package can also be loaded via CDN for use without a bundler:

<link rel="stylesheet" href="https://unpkg.com/@fluix-ui/css/dist/fluix.css" />
<script src="https://unpkg.com/@fluix-ui/vanilla/dist/index.iife.js"></script>
<script>
  const { createToaster, fluix } = window.Fluix;
  createToaster({ position: "top-right" });

  document.getElementById("btn").addEventListener("click", () => {
    fluix.success({ title: "Saved!" });
  });
</script>