Toast

A succinct message that appears temporarily to provide feedback.

"use client"

import { Button } from "@/components/cubix/button"
import { toast } from "@/components/cubix/toast"

export function ToastDemo() {
  function showToast() {
    const id = toast.add({
      title: "Event created",
      description: "Sunday, December 3 at 9:00 AM",
      actionProps: {
        children: "Undo",
        onClick() {
          toast.close(id)
        },
      },
    })
  }

  return (
    <Button variant="outline" onClick={showToast}>
      Show Toast
    </Button>
  )
}

Installation

pnpm dlx cubix@latest add toast

Add the Toaster

Place Toaster in your root layout so toasts can render from anywhere.

app/layout.tsx

import { Toaster } from "@/components/cubix/toast"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

Usage

Import

import { toast } from "@/components/cubix/toast"

Example

toast.add({
  title: "Event created",
  description: "Sunday, December 3 at 9:00 AM",
})

Types

Set the type option to render a status icon. The built-in renderer recognizes success, info, warning, error, and loading.

<Button
  variant="outline"
  onClick={() =>
    toast.add({
      type: "success",
      description: "Event has been created.",
    })
  }
>
  Success
</Button>

Action

Pass button props with actionProps to render an action.

const id = toast.add({
  title: "Event created",
  actionProps: {
    children: "Undo",
    onClick() {
      toast.close(id)
    },
  },
})

Promise

Use toast.promise to update one toast as an asynchronous task moves through loading, success, and error states.

toast.promise(
  new Promise<{ name: string }>((resolve) => {
    window.setTimeout(() => resolve({ name: "Event" }), 2000)
  }),
  {
    loading: "Creating event...",
    success: (data) => `${data.name} created.`,
    error: "Could not create event.",
  }
)

API Reference

See also the Base UI Toast documentation for manager options, stacking, swipe dismissal, and the primitive API.

toast manager

Prop	Type	Default	Description
toast.add	(options) => string	-	Creates a toast. Pass title, description, type, actionProps, and priority.
toast.promise	(promise, options) => string	-	Updates one toast through loading, success, and error states.
toast.close	(id: string) => void	-	Closes a toast by id.
type	"success" \| "info" \| "warning" \| "error" \| "loading"	-	Renders a status icon in the built-in toast list.
actionProps	Button HTML attributes	-	Props forwarded to ToastAction (for example children and onClick).
priority	"low" \| "high"	-	Controls stacking priority for important messages.

Toaster

Prop	Type	Default	Description
toastManager	ToastManager	toast	Optional custom manager from createToastManager().
children	React.ReactNode	-	App content wrapped by the toast provider.
className	string	-	Additional Tailwind classes merged with viewport styles when customizing parts.