Toast

Ready

Toast notifications for user feedback and system messages

Toast Variants

Success, error, warning, and info notifications

Toast with Actions

Add action buttons to toasts

Duration Control

Custom display duration

Installation

Install the required dependencies

npm install @radix-ui/react-toast

Usage

Basic implementation example

import { useToast } from '@/components/ui/toast/use-toast'
import { Toaster } from '@/components/ui/toast/toaster'
import { Button } from '@/components/ui/button'

export default function Example() {
  const { toast } = useToast()

  return (
    <>
      <Button
        onClick={() =>
          toast({
            variant: 'success',
            title: 'Success',
            description: 'Your changes have been saved.',
          })
        }
      >
        Show Toast
      </Button>

      <Toaster />
    </>
  )
}

Props

Toast options

PropTypeDefaultDescription
titlestring-Toast title
descriptionstring-Toast description
variant'default' | 'success' | 'destructive' | 'warning' | 'info''default'Toast variant
durationnumber5000Display duration in ms
action{ label: string, onClick: () => void }-Action button

Features

Built-in functionality

  • 5 variants - Default, success, error, warning, info
  • Auto-dismiss - Configurable duration (default 5s)
  • Swipe to dismiss - Gesture support on mobile
  • Action buttons - Optional CTA in toasts
  • Stack management - Multiple toasts queue properly
  • 8px border radius - Consistent with Eidetic design