Toast

The Toast component provides you with popup notifications with auto-dismiss and positioning.

Import

import { Toast, ToastProvider, useToast } from '@nostromo/ui-core'
// or
import { Toast, ToastProvider, useToast } from '@nostromo/ui-core/toast'

Usage

import { ToastProvider, useToast } from '@nostromo/ui-core'
 
function App() {
  return (
    <ToastProvider>
      <MyComponent />
    </ToastProvider>
  )
}
 
function MyComponent() {
  const { addToast } = useToast()
  
  const handleClick = () => {
    addToast({
      variant: 'success',
      title: 'Success!',
      description: 'Your action was completed.'
    })
  }
  
  return <button onClick={handleClick}>Show Toast</button>
}

Live Examples

Using the Hook

With Action

Best Practices

Do ✅

• Wrap your app with ToastProvider at the root level
• Use the useToast hook for easy toast management
• Provide clear title and description for each toast
• Use appropriate variant for different message types
• Set duration={0} for important toasts that require user action

Don't ❌

• Don't show too many toasts at once
• Don't use toasts for critical errors (use dialogs instead)
• Don't forget to handle toast actions
• Don't use toasts for form validation (use inline errors)

Props

Toast

ToastProvider

useToast Hook

Returns:

• toasts: ToastProps[] - Array of current toasts
• addToast: (toast: Omit<ToastProps, 'id'>) => string - Add a new toast (returns toast ID)
• removeToast: (id: string) => void - Remove a toast by ID
• clearToasts: () => void - Clear all toasts