Installation

Barrel

import { Toasty, useKumoToastManager } from "@cloudflare/kumo";

Granular

import { Toasty, useKumoToastManager } from "@cloudflare/kumo/components/toast";

Usage

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

import { Toasty, useKumoToastManager, Button } from "@cloudflare/kumo";

function ToastTrigger() {
  const toastManager = useKumoToastManager();

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

export default function App() {
  return (
    <Toasty>
      <ToastTrigger />
      {/* Rest of your app */}
    </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
import { Toasty } from "@cloudflare/kumo";

export function Layout({ children }) {
  return <Toasty>{children}</Toasty>;
}

Examples

Title and Description

A complete toast with both title and description.

import { Toasty } from "@cloudflare/kumo";

export function ToastBasicDemo() {
  return (
    <Toasty>
      <ToastTriggerButton />
    </Toasty>
  );
}

Title Only

A simple toast with just a title for brief messages.

import { Toasty } from "@cloudflare/kumo";

export function ToastTitleOnlyDemo() {
  return (
    <Toasty>
      <ToastTitleOnlyButton />
    </Toasty>
  );
}

Description Only

A toast with only a description for more detailed messages.

import { Toasty } from "@cloudflare/kumo";

export function ToastDescriptionOnlyDemo() {
  return (
    <Toasty>
      <ToastDescriptionOnlyButton />
    </Toasty>
  );
}

Success Variant

Use the success variant for confirmations and positive outcomes.

import { Toasty } from "@cloudflare/kumo";

export function ToastSuccessDemo() {
  return (
    <Toasty>
      <ToastSuccessButton />
    </Toasty>
  );
}

Multiple Toasts

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

import { Toasty } from "@cloudflare/kumo";

export function ToastMultipleDemo() {
  return (
    <Toasty>
      <ToastMultipleButton />
    </Toasty>
  );
}

Error Variant

Use the error variant for critical issues that need attention.

import { Toasty } from "@cloudflare/kumo";

export function ToastErrorDemo() {
  return (
    <Toasty>
      <ToastErrorButton />
    </Toasty>
  );
}

Warning Variant

Use the warning variant for cautionary messages.

import { Toasty } from "@cloudflare/kumo";

export function ToastWarningDemo() {
  return (
    <Toasty>
      <ToastWarningButton />
    </Toasty>
  );
}

Info Variant

Use the info variant for neutral informational messages.

import { Toasty } from "@cloudflare/kumo";

export function ToastInfoDemo() {
  return (
    <Toasty>
      <ToastInfoButton />
    </Toasty>
  );
}

Custom Content

Use the content prop to render completely custom toast content.

import { Toasty } from "@cloudflare/kumo";

export function ToastCustomContentDemo() {
  return (
    <Toasty>
      <ToastCustomContentButton />
    </Toasty>
  );
}

Action Buttons

Add action buttons to toasts for user interaction.

import { Toasty } from "@cloudflare/kumo";

export function ToastActionsDemo() {
  return (
    <Toasty>
      <ToastActionsButton />
    </Toasty>
  );
}

Promise

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

import { Toasty } from "@cloudflare/kumo";

export function ToastPromiseDemo() {
  return (
    <Toasty>
      <ToastPromiseButton />
    </Toasty>
  );
}

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 toast
toastManager.add(options);

// Promise-based toast
toastManager.promise(asyncFn(), {
  loading: options,
  success: (data) => options,
  error: (err) => options,
});

Toast Options

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