Toast

Temporary notification messages.

import { toast, Toaster } from 'ui-lab-components/toast';
Duration (ms)5000
"use client";
 
import { useRef } from 'react';
import { Button } from 'ui-lab-components/button';
import { toast, Toaster } from 'ui-lab-components/toast';
 
export default function Example() {
  const containerRef = useRef<HTMLDivElement>(null);
 
  return (
    <div
      ref={containerRef}
      className="relative isolate flex min-h-64 w-full self-stretch items-center justify-center overflow-hidden"
    >
      <Button
        size="sm"
        onClick={() =>
          toast({
            toasterId: 'toast-playground',
            title: "Notification",
            description: "This is a toast message",
            variant: 'default',
            position: 'bottom-right',
            duration: 5000,
          })
        }
      >
        Show Toast
      </Button>
      <Toaster toasterId="toast-playground" container={() => containerRef.current} />
    </div>
  );
}

toast/01-basic-toast

A simple toast notification. Click the button to trigger a toast message with default styling.

Loading interactive preview
import { Button } from 'ui-lab-components/button'
import { toast } from 'ui-lab-components/toast'
import { Toaster } from 'ui-lab-components/toast';
 
export default function Example() {
  return (
    <>
      <Button
        size="sm"
        onClick={() =>
          toast({
            toasterId: 'basic-toast',
            title: 'Notification',
            description: 'This is a toast message',
          })
        }
      >
        Show Toast
      </Button>
      <Toaster toasterId="basic-toast" />
    </>
  )
}

toast/02-success-toast

Toast notification for successful operations.

Loading interactive preview
import { Button } from 'ui-lab-components/button'
import { toast } from 'ui-lab-components/toast'
import { Toaster } from 'ui-lab-components/toast';
 
export default function Example() {
  return (
    <>
      <Button
        size="sm"
        onClick={() =>
          toast({
            toasterId: 'success-toast',
            title: 'Success',
            description: 'Operation completed successfully',
            variant: 'success',
          })
        }
      >
        Show Success
      </Button>
      <Toaster toasterId="success-toast" />
    </>
  )
}

toast/03-danger-toast

Toast notification for errors or destructive operations.

Loading interactive preview
import { Button } from 'ui-lab-components/button'
import { toast } from 'ui-lab-components/toast'
import { Toaster } from 'ui-lab-components/toast';
 
export default function Example() {
  return (
    <>
      <Button
        size="sm"
        onClick={() =>
          toast({
            toasterId: 'danger-toast',
            title: 'Error',
            description: 'Something went wrong',
            variant: 'danger',
          })
        }
      >
        Show Error
      </Button>
      <Toaster toasterId="danger-toast" />
    </>
  )
}

toast/04-info-toast

Toast notification for informational messages.

Loading interactive preview
import { Button } from 'ui-lab-components/button'
import { toast } from 'ui-lab-components/toast'
import { Toaster } from 'ui-lab-components/toast';
 
export default function Example() {
  return (
    <>
      <Button
        size="sm"
        onClick={() =>
          toast({
            toasterId: 'info-toast',
            title: 'Info',
            description: 'Here is some useful information',
            variant: 'info',
          })
        }
      >
        Show Info
      </Button>
      <Toaster toasterId="info-toast" />
    </>
  )
}

toast/05-warning-toast

Toast notification for warnings.

Loading interactive preview
import { Button } from 'ui-lab-components/button'
import { toast } from 'ui-lab-components/toast'
import { Toaster } from 'ui-lab-components/toast';
 
export default function Example() {
  return (
    <>
      <Button
        size="sm"
        onClick={() =>
          toast({
            toasterId: 'warning-toast',
            title: 'Warning',
            description: 'Please be careful',
            variant: 'warning',
          })
        }
      >
        Show Warning
      </Button>
      <Toaster toasterId="warning-toast" />
    </>
  )
}