ComponentHook

Toast

Notification toasts with auto-dismiss, hover pause, and 4 variants. Uses the headless @refraction-ui/toast core.

Trigger Examples

Click a button to trigger a toast. Toasts auto-dismiss after 3 seconds. Hover to pause the timer.

Neutral

Positive

Destructive

Cautionary

No auto-dismiss

Installation

$pnpm add @refraction-ui/react-toast

Usage

tsx

import { ToastProvider, Toaster, useToast, Button } from '@refraction-ui/react'

function MyApp() {
  return (
    <ToastProvider>
      <MyComponent />
      <Toaster />
    </ToastProvider>
  )
}

function MyComponent() {
  const { toast } = useToast()

  return (
    <Button onClick={() => toast('File saved!', { variant: 'success' })}>
      Save
    </Button>
  )
}

useToast() Return

Prop	Type	Default	Description
`toast`	`(message: string, opts?: { variant?: ToastVariant; duration?: number }) => string`	--	Show a new toast. Returns the toast ID.
`dismiss`	`(id: string) => void`	--	Dismiss a specific toast by ID.
`toasts`	`ReadonlyArray<ToastEntry>`	--	Current list of active toasts.

Toast Options

Prop	Type	Default	Description
`variant`	`'default' \| 'success' \| 'error' \| 'warning'`	`'default'`	Visual style of the toast notification.
`duration`	`number`	`3000`	Auto-dismiss duration in ms. Set to 0 to disable auto-dismiss.