Toast — Svelte

Installation

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

Basic Usage

<script>
  import { Toaster, fluix } from "@fluix-ui/svelte";
  import "@fluix-ui/css";
</script>

<Toaster position="top-right" />
<button onclick={() => fluix.success({ title: "Saved!" })}>
  Save
</button>

Add <Toaster /> once in your root layout. Then call fluix.success() from anywhere.

Toaster Component

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

Props

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

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!" }),
  },
});

Layout Modes

<!-- Stack: vertical list -->
<Toaster config={{ layout: "stack" }} />

<!-- Notch: compact island -->
<Toaster config={{ layout: "notch" }} />