Toast

Installation#

pnpmnpmyarnbun
bunx --bun fabricator-ui@latest add toast
Copy

Copyimport { Toaster } from "@/components/ui/toast"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

Usage#

Copyimport { toast } from "@/components/ui/toast"

Copytoast.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.

The success, info, warning and error types colour their icon with the status colour, on the neutral toast surface. See Surfaces.

Action#

Pass button props with actionProps to render an action.

Copyconst 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.

API Reference#

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