Installation

Barrel

Granular

Usage

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

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

export function Layout({ children }) {
  return <Toasty>{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 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.