Toast

Timed notifications via a ToastProvider and a useToast() hook, wrapping Radix Toast.

Toast wraps @radix-ui/react-toast. Put ToastProvider once near the app root (alongside UIProvider); any component below it calls toast({...}) to show a dismissible, auto-expiring notification.

Installation

import { ToastProvider, useToast } from "@iammikz/srui";

Wrap your app:

<UIProvider>
  <ToastProvider>
    <App />
  </ToastProvider>
</UIProvider>

Usage

    const { toast } = useToast();

toast({
  title: "Saved",
  description: "Your changes are live.",
  variant: "success",
});

    toast() options

    OptionTypeDefaultDescription
    titlestring—Heading line
    descriptionstring—Body text
    variant"default" | "success" | "destructive""default"success uses bg-success, destructive uses bg-destructive
    action{ label: string; onClick: () => void }—Optional action button
    durationnumber5000Auto-expire delay in ms
    onDismiss() => void—Fires when the toast closes (timeout, ✕, swipe, or action)

    toast() returns an id — pass it to dismiss(id) or update(id, options) from the same useToast() destructure (e.g. flip a "Uploading…" toast to variant="success" when the upload finishes).

    ToastProvider accepts position — "top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right" (default) — to choose where toasts stack.

    Examples

    Variants

      toast({ title: "Saved", variant: "success" });
toast({ title: "Upload failed", variant: "destructive", description: "Try again." });
toast({ title: "Draft shared", action: { label: "Undo", onClick: undo } });

      Accessibility

      Each toast is role="alert"-adjacent (Radix announces the region); destructive toasts get extra prominence via color and the title text. Escape dismisses the focused toast, and every toast has a labeled close button. The action button provides altText for screen readers.