Toast - Kumo

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

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.

toastManager.add({
  title: "Toast created",
  description: "This is a toast notification."
})

Title Only

A simple toast with just a title for brief messages.

toastManager.add({
  title: "Settings saved"
})

Description Only

A toast with only a description for more detailed messages.

toastManager.add({
  description: "Your changes have been saved successfully."
})

Success Action

Toasts work well for confirming user actions.

toastManager.add({
  title: "Success!",
  description: "Your Worker has been deployed."
})

Multiple Toasts

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

toastManager.add({ title: "First toast" });
toastManager.add({ title: "Second toast" });
toastManager.add({ title: "Third toast" });

Error Variant

Use the error variant for critical issues that need attention.

toastManager.add({
  title: "Deployment failed",
  description: "Unable to connect to the server.",
  variant: "error"
})

Warning Variant

Use the warning variant for cautionary messages.

toastManager.add({
  title: "Rate limit warning",
  description: "You're approaching your API quota.",
  variant: "warning"
})

Custom Content

Use the content prop to render completely custom toast content.

toastManager.add({
  content: (
    <div>
      <div className="flex items-center gap-2">
        <CheckCircleIcon />
        <Link href="/">my-first-worker</Link> created!
      </div>
    </div>
  )
})

Action Buttons

Add action buttons to toasts for user interaction.

toastManager.add({
  title: "Need help?",
  description: "Get assistance with your deployment.",
  actions: [
    { children: "Support", variant: "secondary"},
    { children: "Ask AI", variant: "primary"}
  ]
})

Promise

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

toastManager.promise(deployWorker(), {
  loading: { title: "Deploying...", description: "Please wait." },
  success: (data) => ({ title: "Deployed!", description: `Worker "${data.name}" is live.` }),
  error: (err) => ({ title: "Failed", description: err.message, variant: "error" })
})

API Reference

Toasty

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

Prop	Type	Default	Description
variant	`"default" \| "error" \| "warning"`	`"default"`	-
className	`string`	-	Additional CSS classes
children	`ReactNode`	-	Child elements

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.

Prop	Type	Default	Description
title	string	—	The toast title displayed prominently.
description	string	—	Secondary text displayed below the title.
variant	"default" \| "error" \| "warning"	"default"	Visual style of the toast. Use `error` for failures and `warning` for cautionary messages.
content	ReactNode	—	Custom content to render inside the toast. When provided, overrides `title` and `description`.
actions	ButtonProps[]	—	Array of button props to render as action buttons.
timeout	number	5000	Time in milliseconds before the toast auto-dismisses.