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

Call fluix.success() from event handlers, $effect blocks, or form actions. Since fluix is a plain JavaScript singleton, it works anywhere in Svelte 5 without stores or context:

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

  async function handleSave() {
    await saveSettings();
    fluix.success({
      title: "Settings saved",
      description: "Your preferences have been updated.",
      duration: 5000,
      theme: "dark",
      roundness: 20,
      icon: "✨",
    });
  }
</script>

<button onclick={handleSave}>Save</button>

The theme option accepts any string — "light", "dark", or a custom name you define in CSS. See Theming for details.

Promise Support

Wrap any Promise to show a loading toast that transitions to success or error. Works well inside SvelteKit form actions or +page.ts load functions:

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

  function loadUsers() {
    fluix.promise(
      fetch("/api/users").then((r) => r.json()),
      {
        loading: { title: "Loading users..." },
        success: (users) => ({
          title: "Users loaded",
          description: `Found ${users.length} users`,
        }),
        error: (err) => ({
          title: "Failed to load",
          description: err.message,
        }),
      }
    );
  }
</script>

<button onclick={loadUsers}>Refresh</button>

Action Button

Show a toast with an undo action — useful after destructive operations. Svelte’s event handling makes this straightforward:

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

  function handleDelete(item) {
    deleteItem(item.id);
    fluix.action({
      title: "Item deleted",
      description: `"${item.name}" has been removed.`,
      button: {
        title: "Undo",
        onclick: () => {
          restoreItem(item.id);
          fluix.success({ title: "Restored!" });
        },
      },
    });
  }
</script>

<button onclick={() => handleDelete(item)}>Delete</button>

Layout Modes

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

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

How It Works in Svelte

The Svelte adapter wraps the Fluix core store as a Svelte readable store using runes (Svelte 5). The <Toaster /> component subscribes to toast state changes and re-renders only the affected DOM nodes.

Since fluix is a plain JavaScript singleton, you can call it from $effect blocks, event handlers, form actions, or server-side +page.server.ts load functions (for error handling after redirect).

The description field accepts plain strings. For HTML content, pass a string with markup and Fluix will render it inside the toast body.