Toast

Temporary notification messages.

import { useRef } from 'react';
import { Button } from 'ui-lab-components/button';
import { toast, Toaster } from 'ui-lab-components/toast';
 
export 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-toast-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 const metadata = {
  title: 'Basic Toast',
  description: 'A simple toast notification. Click the button to trigger a toast message with default styling.'
};
 
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-toast-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 const metadata = {
  title: 'Success Toast',
  description: 'Toast notification for successful operations.'
};
 
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-toast-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 const metadata = {
  title: 'Danger Toast',
  description: 'Toast notification for errors or destructive operations.'
};
 
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-toast-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 const metadata = {
  title: 'Info Toast',
  description: 'Toast notification for informational messages.'
};
 
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-toast-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 const metadata = {
  title: 'Warning Toast',
  description: 'Toast notification for warnings.'
};
 
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" />
    </>
  );
}
UI Lab