Toast

Lightweight notification component for global feedback. Uses an imperative API via ref.

Basic Usage

import { Toast } from '@airo-ui/react'
import { useRef } from 'react'

function Demo() {
  const toastRef = useRef(null)

  return (
    <div>
      <button onClick={() => toastRef.current?.showToast('Operation successful!', 'success')}>
        Show Toast
      </button>
      <Toast ref={toastRef} />
    </div>
  )
}

Toast Types

toastRef.current?.showToast('Saved successfully', 'success')
toastRef.current?.showToast('Something went wrong', 'error')
toastRef.current?.showToast('Please check your input', 'warning')
toastRef.current?.showToast('New version available', 'info')

Custom Duration

Set the display duration in milliseconds. The default is 3000ms.

toastRef.current?.showToast('Auto-close after 5 seconds', 'info', 5000)

API

ToastRef Methods

The Toast component exposes a ref with the following methods:

Method	Parameters	Description
showToast	(message: string, type?: ToastType, duration?: number)	Show a toast notification

ToastType

type ToastType = 'success' | 'error' | 'warning' | 'info'

Value	Description
'success'	Success notification
'error'	Error notification
'warning'	Warning notification
'info'	Info notification

Interaction

• Toasts appear with a slide-down + fade-in animation
• Auto-dismiss after the specified duration
• Multiple toasts stack vertically
• Toasts can be dismissed early by clicking