Toast

Lightweight, non-blocking notifications powered by Sonner.

Toasts are brief, dismissible notifications that appear without interrupting the user's workflow.

Setup

Add <Toaster /> once in your app's root layout:

app/layout.tsx

import { Toaster } from "@pex/ui-web/feedback/toast";
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster position="top-center" />
      </body>
    </html>
  );
}

Basic Usage

Types

With Description

With Action

API Reference

Toaster Props

Prop	Type	Default	Description
`position`	`"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"`	`"bottom-right"`	Where toasts appear on screen
`duration`	`number`	`4000`	Auto-dismiss duration in milliseconds
`richColors`	`boolean`	`false`	Use richer semantic colors for success/error/warning
`closeButton`	`boolean`	`false`	Show a close button on each toast

toast()

toast(message: string, options?: ToastOptions)
toast.success(message, options?)
toast.error(message, options?)
toast.warning(message, options?)
toast.info(message, options?)
toast.promise(promise, { loading, success, error })
toast.dismiss(toastId?)

See the Sonner docs for the full API.

Skeleton Sheet

On This Page

Setup Basic Usage Types With Description With Action API Reference Toaster Props toast()