Toast

A notification component for displaying temporary messages.

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

Basic Toast

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

import { Button, toast, Toaster } from 'ui-lab-components';
 
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({ title: 'Notification', description: 'This is a toast message' })}>
        Show Toast
      </Button>
      <Toaster />
    </>
  );
}

Success Toast

Toast notification for successful operations.

import { Button, toast, Toaster } from 'ui-lab-components';
 
export const metadata = {
  title: 'Success Toast',
  description: 'Toast notification for successful operations.'
};
 
export default function Example() {
  return (
    <>
      <Button
        size="sm"
        onClick={() =>
          toast({
            title: 'Success',
            description: 'Operation completed successfully',
            variant: 'success',
          })
        }
      >
        Show Success
      </Button>
      <Toaster />
    </>
  );
}

Danger Toast

Toast notification for errors or destructive operations.

import { Button, toast, Toaster } from 'ui-lab-components';
 
export const metadata = {
  title: 'Danger Toast',
  description: 'Toast notification for errors or destructive operations.'
};
 
export default function Example() {
  return (
    <>
      <Button
        size="sm"
        onClick={() =>
          toast({
            title: 'Error',
            description: 'Something went wrong',
            variant: 'danger',
          })
        }
      >
        Show Error
      </Button>
      <Toaster />
    </>
  );
}

Info Toast

Toast notification for informational messages.

import { Button, toast, Toaster } from 'ui-lab-components';
 
export const metadata = {
  title: 'Info Toast',
  description: 'Toast notification for informational messages.'
};
 
export default function Example() {
  return (
    <>
      <Button
        size="sm"
        onClick={() =>
          toast({
            title: 'Info',
            description: 'Here is some useful information',
            variant: 'info',
          })
        }
      >
        Show Info
      </Button>
      <Toaster />
    </>
  );
}

Warning Toast

Toast notification for warnings.

import { Button, toast, Toaster } from 'ui-lab-components';
 
export const metadata = {
  title: 'Warning Toast',
  description: 'Toast notification for warnings.'
};
 
export default function Example() {
  return (
    <>
      <Button
        size="sm"
        onClick={() =>
          toast({
            title: 'Warning',
            description: 'Please be careful',
            variant: 'warning',
          })
        }
      >
        Show Warning
      </Button>
      <Toaster />
    </>
  );
}
UI Lab