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.

Title Only

A simple toast with just a title for brief messages.

Description Only

A toast with only a description for more detailed messages.

Success Variant

Use the success variant for confirmations and positive outcomes.

Multiple Toasts

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

Error Variant

Use the error variant for critical issues that need attention.

Warning Variant

Use the warning variant for cautionary messages.

Info Variant

Use the info variant for neutral informational messages.

Custom Content

Use the content prop to render completely custom toast content.

Action Buttons

Add action buttons to toasts for user interaction.

Promise

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

API Reference

Toasty

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

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.