Toast

Import/Installation

import { ToastProvider, useToast } from "@lottiefiles/creator-plugins-ui";

Preview

Usage

function Actions() {
  const { toast } = useToast();
  return <button onClick={() => toast({ title: "Saved", variant: "success" })}>Show</button>;
}

<ToastProvider>
  <Actions />
</ToastProvider>;

Props

ToastProvider

Prop	Type	Default	Required	Description
children	React.ReactNode	—	Yes	Provider children.
maxToasts	number	3	No	Maximum number of visible toasts.
position	"top-center" \| "top-right" \| "top-left" \| "bottom-center" \| "bottom-right" \| "bottom-left"	"bottom-right"	No	Placement of the toast viewport.

Toast

Prop	Type	Default	Required	Description
title	string	—	No	Primary toast message.
description	string	—	No	Secondary toast message.
duration	number	3000	No	Auto-dismiss delay in milliseconds. Use `Infinity` for persistent toasts.
action	React.ReactNode	—	No	Optional action element rendered inside the toast.
variant	"default" \| "success" \| "error" \| "warning" \| "info" \| "loading"	"default"	No	Visual tone of the toast.

useToast hook

const { toast, dismiss, toasts } = useToast();

Call toast({ ... }) from anywhere inside <ToastProvider>. Returns a string id you can pass to dismiss(id) to close the toast programmatically.