<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 Variant
Use the success variant for confirmations and positive outcomes.
toastManager.add({
title: "Deployed successfully",
description: "Your Worker is now live.",
variant: "success"
})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"
})Info Variant
Use the info variant for neutral informational messages.
toastManager.add({
title: "New version available",
description: "Kumo v4.2 includes performance improvements.",
variant: "info"
})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" | "success" | "error" | "warning" | "info" | "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” | “success” | “error” | “warning” | “info" | "default” | Visual style of the toast. Use success for confirmations, error for failures, warning for cautionary messages, and info for neutral informational 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. |