# Toast
Notification system with provider, hook, variants, and optional actions.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { ToastProvider, useToast } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/toast
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=toast--all-variants&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="452" title="Toast component live preview" frameBorder="no" loading="lazy" />

## Usage

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

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

## Props

### ToastProvider

<PropsTable
  props={[
  {
    name: "children",
    type: "React.ReactNode",
    required: true,
    description: "Provider children.",
  },
  {
    name: "maxToasts",
    type: "number",
    default: "3",
    description: "Maximum number of visible toasts.",
  },
  {
    name: "position",
    type: '"top-center" | "top-right" | "top-left" | "bottom-center" | "bottom-right" | "bottom-left"',
    default: '"bottom-right"',
    description: "Placement of the toast viewport.",
  },
]}
/>

### Toast

<PropsTable
  props={[
  {
    name: "title",
    type: "string",
    description: "Primary toast message.",
  },
  {
    name: "description",
    type: "string",
    description: "Secondary toast message.",
  },
  {
    name: "duration",
    type: "number",
    default: "3000",
    description: "Auto-dismiss delay in milliseconds. Use `Infinity` for persistent toasts.",
  },
  {
    name: "action",
    type: "React.ReactNode",
    description: "Optional action element rendered inside the toast.",
  },
  {
    name: "variant",
    type: '"default" | "success" | "error" | "warning" | "info" | "loading"',
    default: '"default"',
    description: "Visual tone of the toast.",
  },
]}
/>

## useToast hook

```tsx
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.