bloomkit

Toast

Lightweight notification toasts that auto-dismiss after a configurable duration. Four semantic variants cover the most common feedback scenarios.

Setup — ToastProvider

Wrap your application (or the relevant layout) with ToastProvider once. It renders the toast portal and manages the queue.

import { ToastProvider } from "@bloomkit/react";
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ToastProvider>
          {children}
        </ToastProvider>
      </body>
    </html>
  );
}

Usage — useToast

Call the toast() function returned by useToast() from any component inside the provider tree.

import { useToast } from "@bloomkit/react";
 
function SaveButton() {
  const { toast } = useToast();
 
  const handleSave = async () => {
    await save();
    toast({
      variant: "success",
      title: "Changes saved",
      description: "Your changes have been saved successfully.",
    });
  };
 
  return <button onClick={handleSave}>Save</button>;
}

Variants

toast({ variant: "success", title: "Done!", description: "Operation completed." });
toast({ variant: "error",   title: "Failed", description: "Something went wrong." });
toast({ variant: "warning", title: "Heads up", description: "This cannot be undone." });
toast({ variant: "info",    title: "FYI", description: "Here is some information." });

toast() parameters

PropTypeDefaultDescription
titlestring—Primary message displayed in the toast
descriptionstring—Optional secondary text shown below the title
variant"info" | "success" | "warning" | "error""info"Semantic colour and icon for the toast
durationnumber4000Time in milliseconds before the toast auto-dismisses