Overlays/Toast

Toast

Imperative notification toasts triggered via a hook. Supports success, error, warning, info, and default variants with optional action buttons.

import { useToast, ToastProvider } from "@animui/ui"

Setup

Add ToastProvider once at the root of your app.

app/layout.tsx

// app/layout.tsx — wrap once at root
import { ToastProvider } from "@animui/ui";

export default function RootLayout({ children }) {
  return (
    <html><body>
      <ToastProvider>{children}</ToastProvider>
    </body></html>
  );
}

Basic usage

Variants

Action button

Pass an action option to add a clickable button inside the toast.

useToast return values

Prop	Type	Default	Description
`toast(opts)`	`function`	—	Show a notification. Pass a ToastOptions object (see below).
`dismiss(id)`	`function`	—	Dismiss the toast with the given id.

Toast options

Prop	Type	Default	Description
`message`	`string`	—	Primary text shown in the toast.
`variant`	`"default" \| "success" \| "error" \| "warning" \| "info"`	`"default"`	Controls the icon and border colour.
`description`	`string`	—	Secondary text shown below the message.
`duration`	`number`	`4000`	Auto-dismiss time in milliseconds. Pass 0 to disable auto-dismiss.
`action`	`{ label: string; onClick: () => void }`	—	An action button rendered inside the toast.