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.