Toast

Beautiful toast notifications powered by the excellent react-hot-toast library - lightweight, customizable, and beautiful by default with automatic theme integration.

Basic Toasts

Snippet

import toast, { Toaster } from 'react-hot-toast'

// Basic usage
toast.success('Successfully saved!')
toast.error('Something went wrong')
toast.loading('Loading...')

// Promise toast
toast.promise(
  saveData(),
  {
    loading: 'Saving...',
    success: 'Saved!',
    error: 'Failed to save',
  }
)

Setup

Add the Toaster component to your app root with theme-aware styling:

Snippet

import { Toaster } from 'react-hot-toast'

function App() {
  return (
    <>
      <Toaster
        position="top-center"
        toastOptions={{
          duration: 4000,
          style: {
            background: 'var(--c-surface)',
            color: 'var(--c-text)',
            border: '1px solid var(--c-border)',
          },
          success: {
            iconTheme: {
              primary: 'var(--c-success)',
              secondary: 'var(--c-on-primary)',
            },
          },
          error: {
            iconTheme: {
              primary: 'var(--c-error)',
              secondary: 'var(--c-on-primary)',
            },
          },
        }}
      />
      <YourAppComponents />
    </>
  )
}

Custom Toast

Create fully custom toasts with React components:

Snippet

toast.custom(
  (t) => (
    <div 
      className="max-w-md w-full bg-[var(--c-surface)] shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5"
      style={{
        opacity: t.visible ? 1 : 0,
        transform: `scale(${t.visible ? 1 : 0.95})`,
        transition: 'all 0.2s ease-in-out'
      }}
    >
      <div className="flex-1 w-0 p-4">
        <div className="flex items-start">
          <div className="ml-3 flex-1">
            <p className="text-sm font-medium text-[var(--c-text)]">
              Custom Toast
            </p>
            <p className="mt-1 text-sm text-[var(--c-text-secondary)]">
              This is a custom toast with React components!
            </p>
          </div>
        </div>
      </div>
      <div className="flex border-l border-[var(--c-border)]">
        <button
          onClick={() => toast.dismiss(t.id)}
          className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-[var(--c-primary)] hover:text-[var(--c-primary-hover)]"
        >
          Close
        </button>
      </div>
    </div>
  ),
  {
    duration: 6000, // Custom toasts often need longer duration
  }
)

API Reference

Method	Type	Description
`toast.success`	(message: string) => string	Show success toast
`toast.error`	(message: string) => string	Show error toast
`toast.loading`	(message: string) => string	Show loading toast
`toast.promise`	(promise: Promise) => Promise	Handle async operations
`toast.custom`	(jsx: ReactNode) => string	Custom toast component
`toast.dismiss`	(toastId?: string) => void	Dismiss toast(s)