Toast

The notifications region: a bottom-right stack of cards that auto-dismiss. Wrap your app in a ToastProvider, then call useToast().toast({...}) from anywhere. Each toast has a tone icon, title/description, an optional action, and a close button.

Preview

Usage

import { ToastProvider, useToast } from "crisp";

// once, near the root:
<ToastProvider>{app}</ToastProvider>;

// anywhere inside:
const { toast } = useToast();
toast({
  title: "Changes saved",
  description: "Your record was updated.",
  tone: "success",
  action: { label: "Undo", onClick: undo },
});

API

toast(options) accepts { title, description?, tone?, duration?, action? } where tone is "info" | "success" | "warning" | "danger", duration is ms (0 keeps it until dismissed, default 4000), and action is { label, onClick }. ToastProvider takes a default duration.