Toast

Installation

npx nuecrea-ui add toast

Usage

'use client';

import { Button } from '@/components/ui/button';
import * as Toast from '@/components/ui/toast';

function Toasts() {
  const { toasts } = Toast.useToastManager();
  return toasts.map((t) => (
    <Toast.Root key={t.id} toast={t}>
      <Toast.Content>
        <div className="flex min-w-0 flex-1 flex-col gap-1">
          <Toast.Title />
          <Toast.Description />
        </div>
        {t.actionProps ? <Toast.Action /> : null}
        <Toast.Close>Dismiss</Toast.Close>
      </Toast.Content>
    </Toast.Root>
  ));
}

function Buttons() {
  const manager = Toast.useToastManager();
  return (
    <div className="flex flex-wrap gap-2">
      <Button
        variant="outline"
        onClick={() => manager.add({ title: 'Saved', description: 'Your changes were saved.' })}
      >
        Show toast
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          manager.add({
            title: 'Upload failed',
            description: 'The file is larger than 10 MB.',
            type: 'error',
            priority: 'high',
          })
        }
      >
        Show error
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          manager.add({
            title: 'Message archived',
            description: 'It was moved to Archive.',
            type: 'info',
            actionProps: { children: 'Undo', onClick: () => manager.add({ title: 'Restored' }) },
          })
        }
      >
        With action
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          manager.add({ title: 'Quick note', description: 'Gone in a second.', timeout: 1000 })
        }
      >
        Short timeout
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          manager.promise(new Promise((resolve) => setTimeout(resolve, 800)), {
            loading: { title: 'Uploading…', description: 'Please wait.' },
            success: { title: 'Uploaded', description: 'report.pdf is ready.' },
            error: { title: 'Upload failed' },
          })
        }
      >
        Promise
      </Button>
    </div>
  );
}

export default function ToastStory() {
  return (
    <Toast.Provider timeout={60000}>
      <main>
        <Buttons />
      </main>
      <Toast.Portal>
        <Toast.Viewport>
          <Toasts />
        </Toast.Viewport>
      </Toast.Portal>
    </Toast.Provider>
  );
}

API reference