useToast

What this solves

Toast notifications provide non-blocking feedback for user actions:

• Success confirmations (saved, deleted, copied)
• Error messages
• Informational alerts
• Loading states

useToast is a thin wrapper around Sonner that provides a consistent toast API across the application.

---

When to use it

Use toasts for:

• Confirming successful actions (save, delete, copy)
• Showing non-critical errors that don't block the user
• Brief informational messages
• Background operation status

When NOT to use it

• For critical errors that require user action — use a dialog or inline error
• For form validation — use inline field errors
• For persistent information — use alerts or banners

---

Basic usage

import { toast } from '@/shared/hooks'

export function SaveButton() {
  const handleSave = async () => {
    try {
      await saveData()
      toast.success('Changes saved')
    } catch (error) {
      toast.error('Failed to save changes')
    }
  }

  return <button onClick={handleSave}>Save</button>
}

---

Toast variants

import { toast } from '@/shared/hooks'

// Success
toast.success('Operation completed')

// Error
toast.error('Something went wrong')

// Info
toast.info('New updates available')

// Warning
toast.warning('This action cannot be undone')

// Loading (returns dismiss function)
const toastId = toast.loading('Saving...')
// Later: toast.dismiss(toastId)

// With description
toast.success('File uploaded', {
  description: 'Your file has been uploaded successfully.',
})

// With action
toast.error('Failed to save', {
  action: {
    label: 'Retry',
    onClick: () => handleRetry(),
  },
})

---

Using the hook

If you need access to the dismiss function:

import { useToast } from '@/shared/hooks'

export function MyComponent() {
  const { toast, dismiss } = useToast()

  const showLoading = () => {
    const id = toast.loading('Processing...')
    // Later
    dismiss(id)
  }

  return <button onClick={showLoading}>Start</button>
}

---

API reference (concise)

// Direct import (recommended)
import { toast } from '@/shared/hooks'

toast.success(message: string, options?: ToastOptions)
toast.error(message: string, options?: ToastOptions)
toast.info(message: string, options?: ToastOptions)
toast.warning(message: string, options?: ToastOptions)
toast.loading(message: string, options?: ToastOptions)
toast.dismiss(toastId?: string | number)

// Hook form
import { useToast } from '@/shared/hooks'

const { toast, dismiss } = useToast()

ToastOptions

Option	Type	Description
description	string	Secondary text below the message
duration	number	Auto-dismiss duration in ms
action	{ label: string, onClick: () => void }	Action button

---

Notes

• The <Toaster /> component is mounted globally in AppProviders
• Toasts auto-dismiss after a default duration
• Use toast.loading() for operations that need manual dismissal
• Sonner handles stacking and animations automatically