Toast — Overview

The Toast component displays temporary notifications with spring-based animations and an optional gooey SVG morphing effect.

Features

Spring animation — CSS linear() easing on the compositor thread
SVG gooey morphing — Signature visual effect using SVG filters
6 positions — top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
6 states — success, error, warning, info, action, loading
Promise support — Show loading → success/error transitions
Imperative API — fluix.success(), fluix.error(), etc.
Auto-dismiss — Configurable duration, or persistent
Expand/collapse — Title-only pill that expands to show description
Two layouts — Stack (vertical list) or Notch (compact island)

Imperative API

Fire toasts from anywhere in your app:

import { fluix } from "@fluix-ui/react"; // or @fluix-ui/vue, @fluix-ui/svelte, @fluix-ui/vanilla

// Basic usage
fluix.success({ title: "Saved!" });
fluix.error({ title: "Error", description: "Something went wrong." });
fluix.warning({ title: "Warning", description: "Please check this." });
fluix.info({ title: "Info", description: "Just so you know." });

// With action button
fluix.action({
  title: "Deleted",
  description: "Item removed.",
  button: { title: "Undo", onClick: () => console.log("undone") },
});

// Promise (loading → success/error)
fluix.promise(fetchData(), {
  loading: { title: "Loading..." },
  success: (data) => ({ title: "Done!", description: `Got ${data.count} items` }),
  error: (err) => ({ title: "Failed", description: err.message }),
});

// Dismiss
fluix.dismiss("toast-id");
fluix.clear(); // clear all
fluix.clear("top-right"); // clear by position

Toast — Overview

Features

Imperative API

Framework Guides