Toast Component

A flexible toast notification system with multiple variants and positions.

Installation

pnpm → pnpm dlx pacmanui add toast
npm  → npx pacmanui add toast

API Reference

PROPTYPEDEFAULTDESCRIPTION
messagestringrequiredThe message to display in the toast
variant'default' | 'success' | 'error' | 'warning' | 'info''default'Changes the visual style and icon of the toast
position'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left''bottom-right'Where the toast appears on the screen
durationnumber3000How long the toast stays visible (in milliseconds)
classNamestringundefinedAdditional CSS classes to apply to the toast

Usage

The Toast component must be used in a client component. Make sure to add the 'use client' directive at the top of your file.

Examples

Basic Toast

A simple toast notification in a client component

'use client'

import { useToast, Toast } from '@/components/pacmanui/toast'
import { Button } from "@/components/pacmanui/button"

export default function MyComponent() {
  const { toasts, showToast } = useToast()

  return (
    <>
      <Button onClick={() => showToast({ message: "This is a basic toast" })}>
        Show Toast
      </Button>
      {toasts.map((toast) => (
        <Toast key={toast.id} {...toast} />
      ))}
    </>
  )
}

Toast Variants

Different variants of toast notifications

'use client'

import { useToast, Toast } from '@/components/pacmanui/toast'
import { Button } from "@/components/pacmanui/button"

export default function ToastVariants() {
  const { toasts, showToast } = useToast()
  const variants = ['default', 'success', 'error', 'warning', 'info']

  return (
    <>
      <div className="space-x-2">
        {variants.map((variant) => (
          <Button
            key={variant}
            onClick={() => showToast({ 
              message: `This is a ${variant} toast`, 
              variant 
            })}
          >
            Show {variant}
          </Button>
        ))}
      </div>
      {toasts.map((toast) => (
        <Toast key={toast.id} {...toast} />
      ))}
    </>
  )
}

Toast Positions

Control where toasts appear on the screen

'use client'

import { useToast, Toast } from '@/components/pacmanui/toast'
import { Button } from "@/components/pacmanui/button"

export default function ToastPositions() {
  const { toasts, showToast } = useToast()
  const positions = ['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left']

  return (
    <>
      <div className="space-x-2">
        {positions.map((position) => (
          <Button
            key={position}
            onClick={() => showToast({ 
              message: `Toast at ${position}`, 
              position 
            })}
          >
            {position}
          </Button>
        ))}
      </div>
      {toasts.map((toast) => (
        <Toast key={toast.id} {...toast} />
      ))}
    </>
  )
}