# Toast

- Page: <https://kznlabs.github.io/labsUI/components/toast>

## Toast (`toast`, component)

Stacked notifications. Hover to expand, swipe to dismiss, timers pause on hover.

- Install: `npx @kznlabs/labsui add toast`
- Docs: <https://kznlabs.github.io/labsUI/components/toast>
- Brings: use-dismiss, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0
- Mount once in the root layout, inside `<MotionProvider>`: `<Toaster />`

### API

- `toast(title: ReactNode, opts?: Partial<Omit<ToastData, "id" | "title">>) => number`: `toast("Saved")`, `toast.success(title, { description, action, duration })`, `toast.loading(title)`, `toast.promise(p, { loading, success, error })`, `toast.dismiss(id?)`.
- `<Toaster>`: Mount once (root layout). Stacked toasts: hover, focus or a tap expands, swipe dismisses.

- `type ToastData = { id: number; title: ReactNode; description?: ReactNode; variant: Variant; duration: number; action?: { label: string; onClick: () => void }; }`

### Usage

```tsx
toast.success("Saved", { description: "All changes synced", action: { label: "Undo", onClick } })
```

### Example: save.tsx

```tsx
import { toast } from "@/components/ui/toast";
export function notifySaved() {
  toast.success("Changes saved", {
    description: "All changes synced",
    action: { label: "Undo", onClick: undo },
  });
}
```