Binhlaig UI Component

Toast

Lightweight floating notifications inspired by the clean interaction style of react-hot-toast, adapted for Binhlaig UI.

Installation

Initialize Binhlaig UI once, then install Toast using the saved installer.

Initialize first

npx binhlaig-ui@latest init

Terminal

npx binhlaig-ui@latest add toast

Setup

Wrap the application with ToastProvider and render one Toaster.

import {
  ToastProvider,
  Toaster,
} from "@/components/ui/toast"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <ToastProvider>
      {children}
      <Toaster position="top-center" />
    </ToastProvider>
  )
}

Import

import {
  ToastProvider,
  Toaster,
  useToast,
} from "@/components/ui/toast"

Basic

Show a lightweight toast with a title and optional description.

Variants

Built-in helpers for success, error, loading and info notifications.

Position

Place the toaster in any common screen corner or center position.

<Toaster position="top-right" />

<Toaster position="bottom-center" />

<Toaster position="bottom-right" />

Loading and Dismiss

Loading toasts stay visible until they are dismissed manually.

Update or Overwrite

npx binhlaig-ui@latest add toast --overwrite

API Reference

API	Purpose
`ToastProvider`	Stores and manages toast state.
`Toaster`	Renders the floating toast stack.
`useToast()`	Access toast helpers.
`toast()`	Show a default/custom toast.
`success()`	Show a success toast.
`error()`	Show an error toast.
`loading()`	Show a persistent loading toast.
`info()`	Show an informational toast.
`dismiss(id?)`	Dismiss one toast or all toasts.

Previous component

Pagination

All components