SaaS Toast

Toast notification with provider

SaaSFeedback

Overview

Toast displays temporary notification messages that auto-dismiss after a timeout. It supports five semantic variants, optional action buttons, and requires a ToastProvider and ToastContainer to manage stacking and positioning.

Usage

import { ToastContainer, ToastProvider } from "@leanicon/web-builder-library/saas";

// Wrap your app with ToastProvider
<ToastProvider>
  <App />
  <ToastContainer position="top-right" />
</ToastProvider>;

// Then use the useToast hook to trigger toasts
const { addToast } = useToast();
addToast({ title: "Saved", variant: "success" });

Variants

Default

Dark

Info

Success

Warning

Destructive

With Action

Title Only

Props

Name	Type	Default	Required	Description
`id`	`string`	—	Yes	Unique identifier for the toast
`onDismiss`	`((id: string) => void)`	—	No	Callback when toast is dismissed (manual or auto)
`className`	`string`	—	No	Additional CSS class names
`title`	`string`	—	Yes
`variant`	`enum`	`default`	No
`icon`	`ReactNode`	—	No
`description`	`string`	—	No
`action`	`ToastAction`	—	No
`duration`	`number`	—	No