Toast — React

Installation

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

Basic Usage

import { Toaster, fluix } from "@fluix-ui/react";
import "@fluix-ui/css";

function App() {
  return (
    <>
      <Toaster position="top-right" />
      <button onClick={() => fluix.success({ title: "Saved!" })}>
        Save
      </button>
    </>
  );
}

Add <Toaster /> once in your app (typically in your root layout). Then call fluix.success(), fluix.error(), etc. from anywhere.

Toaster Component

<Toaster
  position="top-right"
  config={{
    layout: "stack",
    offset: 24,
    defaults: {
      theme: "dark",
      duration: 6000,
      roundness: 16,
    },
  }}
/>

Props

Prop	Type	Default	Description
position	FluixPosition	"top-right"	Default viewport position
config	FluixToasterConfig	—	Full configuration object

The config prop accepts position, layout, offset, and defaults. See API Reference.

Toast Options

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

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",
  description: "The item has been removed.",
  button: {
    title: "Undo",
    onClick: () => {
      // restore the item
      fluix.success({ title: "Restored!" });
    },
  },
});

Custom Description (JSX)

React adapter supports JSX in the description field:

fluix.success({
  title: "Booking Confirmed",
  description: (
    <div className="booking-card">
      <strong>Flight UA-920</strong>
      <span>DEL → SFO</span>
    </div>
  ),
});

Layout Modes

// Stack: vertical list of individual toasts
<Toaster config={{ layout: "stack" }} />

// Notch: compact island (toasts share one container)
<Toaster config={{ layout: "notch" }} />