Toast

A lightweight and customizable toast notification component.

Overview

The Toast component is built using React hooks internally. Because hooks require client-side usage, the Toast implementation is exported from a separate directory. When using Toast in your app, import from:

import { useToast, Toaster, ToastAction } from "@bun-ui/react/toast"

This ensures everything works correctly without any extra configuration.

Setup

You must add a Toaster component at the root layout of your application. This component is responsible for rendering and managing toast notifications.

The Toaster only needs to be added once at the app's root.

import { Toaster } from "@bun-ui/react/toast"
 
export const RootLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      {children}
      <Toaster />
    </>
  )
}

Usage

The use-toast hook provides a function createToast that we can use to display toast

import { useToast } from "@bun-ui/react/toast"
 
export const ToastDemo = () => {
  const { createToast } = useToast()
 
  return (
    <Button
      onClick={() => {
        createToast({
          title: "Task completed",
        })
      }}
    >
      Show Toast
    </Button>
  )
}

Examples

Maximum Toasts

Pass maxToasts option to the useToast hook to change the number of toasts

Action Component