Toast

Toast notification system with auto-dismiss and stacking.

Import

import { ToastStack, useToast } from "neoterm-ui";

Usage

function App() {
  const { toasts, addToast, dismissToast } = useToast();

  return (
    <>
      <Button onClick={() => addToast({
        title: "Saved",
        description: "Changes saved successfully.",
        status: "success",
      })}>
        Save
      </Button>
      <ToastStack toasts={toasts} onDismiss={dismissToast} position="bottom-right" />
    </>
  );
}

useToast return

Prop	Type	Default	Description
toasts	ToastData[]	—	Current toast array.
addToast	(toast) => string	—	Add a toast, returns its id.
dismissToast	(id: string) => void	—	Remove a toast by id.
dismissAll	() => void	—	Clear all toasts.

ToastStack Props

Prop	Type	Default	Description
toasts	ToastData[]	—	Toasts to display.
onDismiss	(id: string) => void	—	Dismiss callback.
position	"top-right" \| "top-left" \| "bottom-right" \| "bottom-left"	"top-right"	Stack position.

ToastData

Prop	Type	Default	Description
id	string	—	Unique id.
title	string	—	Toast headline.
description	string	—	Detail text.
status	"success" \| "warning" \| "error" \| "info"	—	Color variant.
duration	number	—	Auto-dismiss ms.