Toast
kumo-svelte

Toast

A notification system for displaying brief, non-intrusive messages to users.

<script lang="ts">
  import { Button, Toasty } from 'kumo-svelte';
</script>

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

Installation

Barrel

import { Toasty } from 'kumo-svelte';

Granular

import { Toasty } from 'kumo-svelte/components/toasty';

Usage

The toast system consists of two parts: the Toasty provider component and the useKumoToastManager() hook for triggering toasts.

<!-- ToastTrigger.svelte --><script lang="ts">  import { Button, useKumoToastManager } from 'kumo-svelte';  const toastManager = useKumoToastManager();</script><Button  onclick={() =>    toastManager.add({      title: 'Success!',      description: 'Your changes have been saved.'    })}>  Save changes</Button>
<!-- +layout.svelte --><script lang="ts">  import { Toasty } from 'kumo-svelte';  import ToastTrigger from './ToastTrigger.svelte';</script><Toasty>  <ToastTrigger /></Toasty>

Setup

Wrap your application (or a section of it) with the Toasty provider. This sets up the toast context and renders the toast viewport.

// In your app root or layout<script lang="ts">  import { Toasty } from 'kumo-svelte';</script><Toasty>  {@render children()}</Toasty>

Examples

Title and Description

A complete toast with both title and description.

<script lang="ts">
  import { Button, Toasty } from 'kumo-svelte';
</script>

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

Title Only

A simple toast with just a title for brief messages.

<script lang="ts">
  import { Button, Toasty } from 'kumo-svelte';
</script>

<Toasty>
  {#snippet children(toastManager)}
    <Button
      variant="secondary"
      onclick={() =>
        toastManager.add({
          title: "Settings saved",
          description: "",
          variant: "default"
        })}
    >
      Title only
    </Button>
  {/snippet}
</Toasty>

Description Only

A toast with only a description for more detailed messages.

<script lang="ts">
  import { Button, Toasty } from 'kumo-svelte';
</script>

<Toasty>
  {#snippet children(toastManager)}
    <Button
      variant="secondary"
      onclick={() =>
        toastManager.add({
          title: "",
          description: "Your changes have been saved successfully.",
          variant: "default"
        })}
    >
      Description only
    </Button>
  {/snippet}
</Toasty>

Success Variant

Use the success variant for confirmations and positive outcomes.

<script lang="ts">
  import { Button, Toasty } from 'kumo-svelte';
</script>

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

Multiple Toasts

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

<script lang="ts">
  import { Button, Toasty } from 'kumo-svelte';
</script>

<Toasty>
  {#snippet children(toastManager)}
    <Button
      variant="secondary"
      onclick={() =>
        toastManager.add({
          title: "Toast created",
          description: "This is a toast notification.",
          variant: "default"
        })}
    >
      Show multiple toasts
    </Button>
  {/snippet}
</Toasty>

Error Variant

Use the error variant for critical issues that need attention.

<script lang="ts">
  import { Button, Toasty } from 'kumo-svelte';
</script>

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

Warning Variant

Use the warning variant for cautionary messages.

<script lang="ts">
  import { Button, Toasty } from 'kumo-svelte';
</script>

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

Info Variant

Use the info variant for neutral informational messages.

<script lang="ts">
  import { Button, Toasty } from 'kumo-svelte';
</script>

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

Custom Content

Use the content prop to render completely custom toast content.

<script lang="ts">
  import { Button, Link, Toasty } from 'kumo-svelte';
  import { CheckCircle } from 'phosphor-svelte';
</script>

<Toasty>
  {#snippet children(toastManager)}
    {#snippet content()}
      <div class="flex items-center gap-2">
        <CheckCircle class="size-4" />
        <Link href="/">my-first-worker</Link> created!
      </div>
    {/snippet}

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

Action Buttons

Add action buttons to toasts for user interaction.

<script lang="ts">
  import { Button, Toasty } from 'kumo-svelte';
</script>

<Toasty>
  {#snippet children(toastManager)}
    <Button
      variant="secondary"
      onclick={() =>
        toastManager.add({
          title: "Toast created",
          description: "This is a toast notification.",
          variant: "default"
        })}
    >
      Show with actions
    </Button>
  {/snippet}
</Toasty>

Promise

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

<script lang="ts">
  import { Button, Toasty } from 'kumo-svelte';
</script>

<Toasty>
  {#snippet children(toastManager)}
    <Button
      variant="secondary"
      onclick={() =>
        toastManager.add({
          title: "Toast created",
          description: "This is a toast notification.",
          variant: "default"
        })}
    >
      Deploy with promise
    </Button>
  {/snippet}
</Toasty>

API Reference

Toasty

The provider component that wraps your app and manages the toast system.

PropTypeDefaultDescription
children Snippet<[KumoToastManager]>-Child snippet rendered by the component.
toastManager KumoToastManager-Optional toast manager created by createKumoToastManager().
container HTMLElement | stringdocument.bodyPortal container for custom roots or Shadow DOM.

useKumoToastManager()

A hook that returns the toast manager for creating toasts.

const toastManager = useKumoToastManager();// Add a toasttoastManager.add(options);// Promise-based toasttoastManager.promise(asyncFn(), {  loading: options,  success: (data) => options,  error: (err) => options,});

Toast Options

Options passed to toastManager.add() and promise handlers.

PropTypeDefaultDescription
titlestring—The toast title displayed prominently.
descriptionstring—Secondary text displayed below the title.
variant"default" | "success" | "error" | "warning" | "info""default"Visual style of the toast.
contentSnippet—Custom content to render inside the toast. Overrides title and description.
actionsButtonProps[]—Array of button props to render as action buttons.
timeoutnumber5000Time in milliseconds before the toast auto-dismisses.