Devie UI

<Toast />

The Toast component extends Base UI's Toast. Toasts display brief, non-intrusive notifications that appear temporarily and auto-dismiss. They're ideal for confirming actions, showing status updates, or providing feedback without interrupting the user's workflow.

The implementation consists of two parts: Toast provides the styled primitives (Viewport, Root, Title, Description, Close), while Toaster is a ready-to-use component that renders all active toasts with appropriate icons based on their type. Note that Toast.Provider must be imported directly from Base UI in your layout due to React context limitations.

Installation

Here is the component implementation code that you can copy to your project:

"use client";
 
import * as BaseToast from "@base-ui-components/react/toast";
import styles from "./Toast.module.scss";
 
/**
 * Custom Toast components with styling
 *
 * NOTE: For the Toast.Provider, we need to use the original from '@base-ui-components/react/toast'
 * directly in the layout because it uses a React context that can't be properly re-exported.
 *
 * Usage:
 * 1. In layout.tsx: import { Toast } from '@base-ui-components/react/toast';
 * 2. Elsewhere: import Toast from '@/ui/Toast';
 */
const Toast = {
  // We can't reexport the Provider - use the original directly
  // Provider: BaseToast.Toast.Provider,
 
  // Pass through the manager hook
  useToastManager: BaseToast.Toast.useToastManager,
 
  // Wrap other components with our styles
  Viewport: ({ className, ...props }: BaseToast.Toast.Viewport.Props) => (
    <BaseToast.Toast.Viewport
      className={`${styles.viewport} ${className || ""}`}
      {...props}
    />
  ),
 
  Root: ({ className, ...props }: BaseToast.Toast.Root.Props) => (
    <BaseToast.Toast.Root
      className={`${styles.root} ${className || ""}`}
      {...props}
    />
  ),
 
  Title: ({ className, ...props }: BaseToast.Toast.Title.Props) => (
    <BaseToast.Toast.Title
      className={`${styles.title} ${className || ""}`}
      {...props}
    />
  ),
 
  Description: ({ className, ...props }: BaseToast.Toast.Description.Props) => (
    <BaseToast.Toast.Description
      className={`${styles.description} ${className || ""}`}
      {...props}
    />
  ),
 
  Action: ({ className, ...props }: BaseToast.Toast.Action.Props) => (
    <BaseToast.Toast.Action
      className={`${styles.action} ${className || ""}`}
      {...props}
    />
  ),
 
  Close: ({ className, ...props }: BaseToast.Toast.Close.Props) => (
    <BaseToast.Toast.Close
      className={`${styles.close} ${className || ""}`}
      {...props}
    />
  ),
};
 
export default Toast;

Use Cases

Basic usage

Use the useToastManager hook to add toasts programmatically. Call toastManager.add() with a title and optional description to display a notification.

Simple toast

For quick confirmations, you can show a toast with just a description and no title.

Toast types

Toasts support three types: info (default), success, and error. Each type displays a different icon and border color to communicate the message's nature.