Toaster

ToastProvider / Toaster mounts a single Radix-backed viewport and exposes an imperative useToast() hook for queuing transient feedback. Reach for this provider when you want a one-stop notification system; use the lower-level Toast primitive when you need full control over open state.

#Default usage

<Toaster />

#Import

import { ToastProvider, Toaster, useToast } from "@froggdesign/enter-ui-react";

#Patterns

Mount ToastProvider once near the root of your app and call useToast().toast(...) from any descendant client component. Toaster remains available as the provider implementation.

export function App({ children }) {
  return (
    <>
      {children}
      <ToastProvider />
    </>
  );
}

function PublishButton() {
  const { toast } = useToast();
  return (
    <button
      onClick={() =>
        toast({
          title: "Published",
          description: "Your component docs are live.",
          variant: "success",
        })
      }
      type="button"
    >
      Publish
    </button>
  );
}

#Variants

variant accepts default, success, info, warning, and error. Each toast may also include an action and is dismissible via the close button or by swiping right. Set dismissible: false for short-lived status messages that should close only by duration or imperative dismissal.

toast({
  title: "Draft saved",
  description: "Review before publishing.",
  variant: "warning",
  action: {
    label: "Review",
    altText: "Review draft",
    onAction: () => openReviewModal(),
  },
});

toast.success("Published");
toast.error({
  title: "Publish failed",
  description: "Check the release logs and try again.",
});

Pass position to move the viewport to top-right (default), top-center, bottom-right, or bottom-center.

<Toaster position="bottom-center" defaultDuration={6000} limit={3} />

#Accessibility

Toasts use Radix's live region semantics. Each toast pauses on hover and focus, the close button is labelled, and swipeDirection="right" lets pointer users dismiss without aiming at the close icon. Keep description short — long copy belongs in a Dialog or page surface.

#API

• ToastProvider / Toaster({ defaultDuration, limit, position, hotkey, closeLabel }) — provider + viewport.
• useToast() / useToaster() returns { toast, dismiss, toasts }.
• toast(input) returns the queued toast id; pass it to dismiss(id) to close manually.
• toast.success, toast.info, toast.warning, and toast.error are semantic shortcuts.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.