Feedback

Toast

Draggable toast notifications with progress bar and swipe-to-dismiss on mobile.

Setup Required

This component requires the ToastProvider. See Getting Started.

Toast Notifications

Animated icons and customizable layouts for system-wide feedback.

'use client'

import React from 'react'
import { useToast, Button } from 'biibaos'
import { X } from 'lucide-react'

export default function App() {
  const { toast } = useToast()

  return (
    <>
      <Button onClick={() => toast.success('Payment Received')}>
        Show Success
      </Button>
      
      {/* Custom Close Icon */}
      <Button onClick={() => toast.info('New Update', { 
        closeIcon: <X size={14} /> 
      })}>
        Custom Close
      </Button>
    </>
  )
}

Properties

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Main descriptive text or overlay children layout
`defaultPosition`	`ToastPosition`	—	Configures the defaultPosition option
`defaultDuration`	`number`	—	Configures the defaultDuration option

Skeleton

Snackbar