<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { createKumoToastManager, Toasty } from "kumo-svelte/components/toast";
  const toastManager = createKumoToastManager();
</script>

<Toasty>
  <Button
    onclick={() =>
      toastManager.add({
        title: "Toast created",
        description: "This is a toast notification.",
      })}
  >
    Show toast
  </Button>
</Toasty>

Import

import { Toasty, createKumoToastManager, useKumoToastManager } from "kumo-svelte/components/toast";

Usage

The toast system consists of two parts: the Toasty provider component and a toast manager for triggering toasts. Use createKumoToastManager() when triggering toasts from ordinary app code, or useKumoToastManager() when you need the active Sonner context.

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { createKumoToastManager, Toasty } from "kumo-svelte/components/toast";
  const toastManager = createKumoToastManager();
</script>

<Toasty>
  <Button
    onclick={() =>
      toastManager.add({
        title: "Success!",
        description: "Your changes have been saved.",
      })}
  >
    Save changes
  </Button>
</Toasty>

Setup

Wrap your application or a section of it with the Toasty provider. This sets up the toast viewport.

<script lang="ts">
  import { Toasty } from "kumo-svelte/components/toast";
</script>

<Toasty>
  {@render children()}
</Toasty>

Examples

Title and Description

A complete toast with both title and description.

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { createKumoToastManager, Toasty } from "kumo-svelte/components/toast";
  const toastManager = createKumoToastManager();
</script>

<Toasty>
  <Button
    onclick={() =>
      toastManager.add({
        title: "Toast created",
        description: "This is a toast notification.",
      })}
  >
    Show toast
  </Button>
</Toasty>

Title Only

A simple toast with just a title for brief messages.

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { createKumoToastManager, Toasty } from "kumo-svelte/components/toast";
  const toastManager = createKumoToastManager();
</script>

<Toasty>
  <Button onclick={() => toastManager.add({ title: "Settings saved" })}>Title only</Button>
</Toasty>

Description Only

A toast with only a description for more detailed messages.

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { createKumoToastManager, Toasty } from "kumo-svelte/components/toast";
  const toastManager = createKumoToastManager();
</script>

<Toasty>
  <Button onclick={() => toastManager.add({ description: "Your changes have been saved successfully." })}>
    Description only
  </Button>
</Toasty>

Success Variant

Use the success variant for confirmations and positive outcomes.

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { createKumoToastManager, Toasty } from "kumo-svelte/components/toast";
  const toastManager = createKumoToastManager();
</script>

<Toasty>
  <Button
    variant="primary"
    onclick={() =>
      toastManager.add({
        title: "Deployed successfully",
        description: "Your Worker is now live.",
        variant: "success",
      })}
  >
    Deploy Worker
  </Button>
</Toasty>

Multiple Toasts

Multiple toasts stack and animate smoothly. Hover over the stack to expand them.

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { createKumoToastManager, Toasty } from "kumo-svelte/components/toast";
  const toastManager = createKumoToastManager();

  function showMultiple() {
    toastManager.add({ title: "First toast", description: "This is the first notification." });
    setTimeout(() => {
      toastManager.add({ title: "Second toast", description: "This is the second notification." });
    }, 500);
    setTimeout(() => {
      toastManager.add({ title: "Third toast", description: "This is the third notification." });
    }, 1000);
  }
</script>

<Toasty>
  <Button onclick={showMultiple}>Show multiple toasts</Button>
</Toasty>

Error Variant

Use the error variant for critical issues that need attention.

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { createKumoToastManager, Toasty } from "kumo-svelte/components/toast";
  const toastManager = createKumoToastManager();
</script>

<Toasty>
  <Button
    onclick={() =>
      toastManager.add({
        title: "Deployment failed",
        description: "Unable to connect to the server.",
        variant: "error",
      })}
  >
    Show error toast
  </Button>
</Toasty>

Warning Variant

Use the warning variant for cautionary messages.

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { createKumoToastManager, Toasty } from "kumo-svelte/components/toast";
  const toastManager = createKumoToastManager();
</script>

<Toasty>
  <Button
    onclick={() =>
      toastManager.add({
        title: "Rate limit warning",
        description: "You're approaching your API quota.",
        variant: "warning",
      })}
  >
    Show warning toast
  </Button>
</Toasty>

Info Variant

Use the info variant for neutral informational messages.

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { createKumoToastManager, Toasty } from "kumo-svelte/components/toast";
  const toastManager = createKumoToastManager();
</script>

<Toasty>
  <Button
    onclick={() =>
      toastManager.add({
        title: "New version available",
        description: "Kumo v4.2 includes performance improvements.",
        variant: "info",
      })}
  >
    Show info toast
  </Button>
</Toasty>

Custom Content

Svelte Sonner uses a component option for custom toast content.

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { createKumoToastManager, Toasty } from "kumo-svelte/components/toast";
  import CustomToastContent from "./custom-toast-content.svelte";

  const toastManager = createKumoToastManager();
</script>

<Toasty>
  <Button onclick={() => toastManager.add({ component: CustomToastContent })}>Show custom content</Button>
</Toasty>

Action Buttons

Use Svelte Sonner’s action and cancel options to add buttons to toasts.

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { createKumoToastManager, Toasty } from "kumo-svelte/components/toast";
  const toastManager = createKumoToastManager();
</script>

<Toasty>
  <Button
    onclick={() =>
      toastManager.add({
        title: "Need help?",
        description: "Get assistance with your deployment.",
        action: {
          label: "Ask AI",
          onClick: () => console.log("Ask AI clicked"),
        },
        cancel: {
          label: "Support",
          onClick: () => console.log("Support clicked"),
        },
      })}
  >
    Show with actions
  </Button>
</Toasty>

Promise

Use the promise method to show loading, success, and error states automatically.

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { createKumoToastManager, Toasty } from "kumo-svelte/components/toast";
  const toastManager = createKumoToastManager();

  function simulateDeployment() {
    return new Promise<{ name: string }>((resolve, reject) => {
      setTimeout(() => {
        if (Math.random() > 0.3) {
          resolve({ name: "my-worker" });
        } else {
          reject(new Error("Network error"));
        }
      }, 2000);
    });
  }
</script>

<Toasty>
  <Button
    onclick={() =>
      toastManager.promise(simulateDeployment(), {
        loading: "Deploying...",
        success: (data) => `Worker \"${(data as { name: string }).name}\" is now live.`,
        error: (error) => (error instanceof Error ? error.message : "Deployment failed"),
      })}
  >
    Deploy with promise
  </Button>
</Toasty>

API Reference

Toasty

Prop	Type	Default
children	`Snippet`	—

Toaster

Prop	Type	Default
children	`Snippet`	—

ToastProvider

Prop	Type	Default
children	`Snippet`	—