--- title: Toast description: Brief notices for status updates and feedback. group: Components order: 68 --- 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 "use client" import { Button } from "@/components/ui/button" import { toast } from "@/components/ui/toast" export function Example() { return ( ) } ``` ## Installation ```bash npx @arctis-sh/@arctis-sh/ui@latest add toast ``` Add `Toaster` near the root of your app. ```tsx import { Toaster } from "@/components/ui/toast" export default function Layout({ children }) { return ( {children} ) } ``` ## Usage ```tsx import { toast } from "@/components/ui/toast" ``` ```tsx toast.add({ title: "Event created", description: "Sunday, December 3 at 9:00 AM", }) ``` ## Types Set `type` to show a `success`, `info`, `warning`, or `error` icon. The `loading` type is used by `toast.promise`. ```tsx "use client" import { Button } from "@/components/ui/button" import { toast } from "@/components/ui/toast" export function Example() { return ( <> ) } ``` ## Action Pass `actionProps` to add a small outline button that matches the close control's height. ```tsx "use client" import { Button } from "@/components/ui/button" import { toast } from "@/components/ui/toast" export function Example() { return ( ) } ``` ```tsx const id = toast.add({ title: "Event created", actionProps: { children: "Undo", onClick() { toast.close(id) }, }, }) ``` ## Promise Use `toast.promise` to move one toast from loading to success or error. ```tsx "use client" import { Button } from "@/components/ui/button" import { toast } from "@/components/ui/toast" export function Example() { return ( ) } ``` ## API Reference ### toast | 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 | ```tsx toast.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 | — | ```tsx toast.add({ title: "Saved", description: "Your changes were stored.", type: "success", }) ``` ### toast.promise options | Prop | Type | Default | | --- | --- | --- | | loading | string \| options | — | | success | string \| options \| (data) => … | — | | error | string \| options \| (error) => … | — | ```tsx toast.promise(save(), { loading: "Saving…", success: "Saved", error: "Something went wrong", }) ``` ### 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. ```tsx ``` ## Source ```tsx "use client"; import { Toast as ToastPrimitive } from "@base-ui/react/toast"; import type { ComponentProps, ReactNode } from "react"; import { Button, buttonVariants } from "@/components/ui/button"; import { Spinner } from "@/components/ui/spinner"; import { cn } from "@/lib/utils"; const toastManager = ToastPrimitive.createToastManager(); export const toast = toastManager; export const createToastManager = ToastPrimitive.createToastManager; export const useToastManager = ToastPrimitive.useToastManager; function mergeClass( base: string, className?: string | ((state: State) => string | undefined), ) { if (typeof className === "function") { return (state: State) => cn(base, className(state)); } return cn(base, className); } type ToastProviderProps = ComponentProps; export function ToastProvider({ toastManager: manager = toastManager, ...props }: ToastProviderProps) { return ; } export function ToastPortal( props: ComponentProps, ) { return ; } export function ToastViewport({ className, ...props }: ComponentProps) { return ( ); } export function Toast({ className, ...props }: ComponentProps) { return ( ); } export function ToastContent({ className, ...props }: ComponentProps) { return ( ); } export function ToastTitle({ className, ...props }: ComponentProps) { return ( ); } export function ToastDescription({ className, ...props }: ComponentProps) { return ( ); } export function ToastAction({ className, ...props }: ComponentProps) { return ( ); } function CloseIcon({ className }: { className?: string }) { return ( ); } export function ToastClose({ className, children, ...props }: ComponentProps) { return ( {children ?? } ); } function ToastIcon({ type }: { type: string | undefined }) { if (!type) return null; const className = cn( "size-4 shrink-0", type === "success" && "text-success", type === "info" && "text-foreground", type === "warning" && "text-warning", type === "error" && "text-destructive", type === "loading" && "text-muted-foreground", ); if (type === "success") { return ( ); } if (type === "info") { return ( ); } if (type === "warning") { return ( ); } if (type === "error") { return ( ); } if (type === "loading") { return