Toast

Ephemeral notification toasts with auto-dismiss, variants, and optional actions.

Installation

npx @obi/ui add toast

Preview

bottom right · stacks upward

Usage

import { ToastProvider, useToast } from '@/src/components/Toast/Toast';

// 1. Wrap your app (or layout) with ToastProvider
export default function Layout({ children }) {
  return (
    <ToastProvider position="bottom-right">
      {children}
    </ToastProvider>
  );
}

// 2. Call useToast() anywhere inside the tree
function MyComponent() {
  const { toast } = useToast();

  return (
    <button
      onClick={() => toast({
        title:       'Saved',
        description: 'Your changes were saved.',
        variant:     'success',
        duration:    4000,
      })}
    >
      Save
    </button>
  );
}

Props

NameTypeDefaultDescription
position'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right''bottom-right'Where toasts appear on screen.
titlestringundefinedBold heading text.
descriptionstringundefinedBody message.
variant'default' | 'success' | 'warning' | 'danger''default'Color and icon style.
durationnumber4000Auto-dismiss delay in ms.
action{ label: string; onClick: () => void }undefinedOptional action button.