Devie UI
Version: 2026-02-14

<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:

// https://devie-ui.com/components/toast
// https://base-ui.com/react/components/toast
 
"use client";
 
import { Toast as BaseToast } from "@base-ui/react/toast";
import clsx from "clsx";
import styles from "./Toast.module.scss";
 
/**
 * NOTE: Toast.Provider must be imported directly from '@base-ui/react/toast'
 * in your layout because React context can't be properly re-exported.
 *
 * Usage:
 * 1. In layout.tsx: import { Toast } from '@base-ui/react/toast';
 * 2. Elsewhere: import Toast from '@/ui/Toast';
 */
 
const useToastManager = BaseToast.useToastManager;
 
function Viewport({ className, ...props }: BaseToast.Viewport.Props) {
  return (
    <BaseToast.Viewport
      className={clsx(styles.viewport, className)}
      {...props}
    />
  );
}
 
function Root({ className, ...props }: BaseToast.Root.Props) {
  return <BaseToast.Root className={clsx(styles.root, className)} {...props} />;
}
 
function Title({ className, ...props }: BaseToast.Title.Props) {
  return (
    <BaseToast.Title className={clsx(styles.title, className)} {...props} />
  );
}
 
function Description({ className, ...props }: BaseToast.Description.Props) {
  return (
    <BaseToast.Description
      className={clsx(styles.description, className)}
      {...props}
    />
  );
}
 
function Action({ className, ...props }: BaseToast.Action.Props) {
  return (
    <BaseToast.Action className={clsx(styles.action, className)} {...props} />
  );
}
 
function Close({ className, ...props }: BaseToast.Close.Props) {
  return (
    <BaseToast.Close className={clsx(styles.close, className)} {...props} />
  );
}
 
const Toast = {
  useToastManager,
  Viewport,
  Root,
  Title,
  Description,
  Action,
  Close,
};
 
namespace Toast {
  export namespace Viewport {
    export type Props = BaseToast.Viewport.Props;
  }
  export namespace Root {
    export type Props = BaseToast.Root.Props;
    export type ToastObject = BaseToast.Root.ToastObject;
  }
  export namespace Title {
    export type Props = BaseToast.Title.Props;
  }
  export namespace Description {
    export type Props = BaseToast.Description.Props;
  }
  export namespace Action {
    export type Props = BaseToast.Action.Props;
  }
  export namespace Close {
    export type Props = BaseToast.Close.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.