Toast

Show a brief notice in the corner. Additional toasts stack behind the first, expand on hover, and dismiss with a downward or rightward swipe.

tsx

1"use client"23import { Button } from "@/components/ui/button"4import { toast } from "@/components/ui/toast"56export function Example() {7  return (8    <Button9      variant="outline"10      onClick={() => {11        const id = toast.add({12          title: "Event created",13          description: "Sunday, December 3 at 9:00 AM",14          actionProps: {15            children: "Undo",16            onClick() {17              toast.close(id)18            },19          },20        })21      }}22    >23      Show Toast24    </Button>25  )26}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add toast

Add Toaster near the root of your app.

1import { Toaster } from "@/components/ui/toast"23export default function Layout({ children }) {4  return (5    <html lang="en">6      <body>7        <Toaster>{children}</Toaster>8      </body>9    </html>10  )11}

Usage

1import { toast } from "@/components/ui/toast"

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

Types

Set type to show a success, info, warning, or error icon. The loading type is used by toast.promise.

tsx

1"use client"23import { Button } from "@/components/ui/button"4import { toast } from "@/components/ui/toast"56export function Example() {7  return (8    <>9      <Button10        variant="outline"11        onClick={() =>12          toast.add({ description: "Event has been created." })13        }14      >15        Default16      </Button>17      <Button18        variant="outline"19        onClick={() =>20          toast.add({21            type: "success",22            description: "Event has been created.",23          })24        }25      >26        Success27      </Button>28      <Button29        variant="outline"30        onClick={() =>31          toast.add({32            type: "info",33            description: "Arrive 10 minutes before the event.",34          })35        }36      >37        Info38      </Button>39      <Button40        variant="outline"41        onClick={() =>42          toast.add({43            type: "warning",44            description: "The event cannot start before 8:00 AM.",45          })46        }47      >48        Warning49      </Button>50      <Button51        variant="outline"52        onClick={() =>53          toast.add({54            type: "error",55            description: "The event could not be created.",56            priority: "high",57          })58        }59      >60        Error61      </Button>62    </>63  )64}

Action

Pass actionProps to add a small outline button that matches the close control's height.

tsx

1"use client"23import { Button } from "@/components/ui/button"4import { toast } from "@/components/ui/toast"56export function Example() {7  return (8    <Button9      variant="outline"10      onClick={() => {11        const id = toast.add({12          title: "Event created",13          actionProps: {14            children: "Undo",15            onClick() {16              toast.close(id)17            },18          },19        })20      }}21    >22      Show Toast23    </Button>24  )25}

1const id = toast.add({2  title: "Event created",3  actionProps: {4    children: "Undo",5    onClick() {6      toast.close(id)7    },8  },9})

Promise

Use toast.promise to move one toast from loading to success or error.

tsx

1"use client"23import { Button } from "@/components/ui/button"4import { toast } from "@/components/ui/toast"56export function Example() {7  return (8    <Button9      variant="outline"10      onClick={() => {11        toast.promise(12          new Promise<{ name: string }>((resolve) => {13            window.setTimeout(() => resolve({ name: "Event" }), 2000)14          }),15          {16            loading: "Creating event…",17            success: (data) => `${data.name} created.`,18            error: "Could not create event.",19          },20        )21      }}22    >23      Create Event24    </Button>25  )26}

API Reference

Method	Type	Description
add	(options) => string	Create a toast and return its id
close	(id?: string) => void	Dismiss one toast, or all if no id
update	(id, options) => void	Patch an existing toast
promise	(promise, options) => Promise	Drive loading → success/error

1toast.add({ title: "Saved" })

toast.add options

Prop	Type	Default
title	ReactNode	—
description	ReactNode	—
type	"success" \| "info" \| "warning" \| "error" \| "loading" \| string	—
timeout	number	5000
priority	"low" \| "high"	"low"
actionProps	button props	—
onClose	() => void	—
onRemove	() => void	—

1toast.add({2  title: "Saved",3  description: "Your changes were stored.",4  type: "success",5})

toast.promise options

Prop	Type	Default
loading	string \| options	—
success	string \| options \| (data) => …	—
error	string \| options \| (error) => …	—

1toast.promise(save(), {2  loading: "Saving…",3  success: "Saved",4  error: "Something went wrong",5})

Toaster

Prop	Type	Default
timeout	number	5000
limit	number	3
toastManager	ToastManager	shared manager
children	ReactNode	—

Hover or focus the viewport to expand the stack. Toasts beyond limit stay mounted with data-limited, allowing them to fade instead of disappearing at once.

1<Toaster timeout={5000} limit={3} />