Toast

A toast system — provider, imperative API, tones, and a live region for screen readers.

Live — this one is real

Usage

import type { ReactNode } from "react";
import { ToastProvider, useToast } from "mizu-ui";

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

export function Saver() {
  const { toast } = useToast();
  const notify = () => toast("Notification received", { tone: "success" });
  return <button onClick={notify}>Notify</button>;
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect feedback/Toast.tsx

Source is included in the npm package under src/feedback/Toast.tsx.

Open full source ↗

Props

Prop	Type	Default	Description
toast	(message, options?) => void	—	Push a toast. options: tone (default \| success \| error), duration (ms).

Accessibility

The viewport is aria-live=polite — toasts are announced without stealing focus.

Motion

Expo rise on enter, slide-fade on exit. Maximum 4 visible; oldest is replaced.

Works alongside

CountUp CopyButton