Toast

Non-blocking notification toasts with variants, actions, and auto-dismiss. Singleton manager accessible from anywhere.

import { getToastManager } from 'phoundry-ui';

Variants

Show code

const toast = getToastManager();

toast.success('Changes saved');
toast.error('Something went wrong');
toast.warning('Storage almost full');
toast.info('New version available');

With Description

Show code

toast.add({
  message: 'File uploaded',
  description: 'report.pdf was uploaded successfully.',
  variant: 'success',
});

With Action

Show code

toast.add({
  message: 'Item deleted',
  variant: 'default',
  action: { label: 'Undo', onclick: () => console.log('Undo!') },
});

Stable ID (replace in place)

Show code

toast.add({
  id: 'sync-status',
  message: 'Saving…',
  duration: 0,
});

toast.add({
  id: 'sync-status',
  message: 'Saved',
  variant: 'success',
  duration: 2000,
});

Persistent & clear

Show code

const id = toast.add({ message: 'Pinned note', duration: 0 });
toast.dismiss(id);
toast.clear();

ToastOptions

Prop	Type	Default	Description
message required	string	—	Toast message text.
id	string	—	Stable ID — posting another toast with the same ID replaces the previous one.
variant	'default' \| 'success' \| 'error' \| 'warning' \| 'info'	'default'	Visual style.
duration	number	4000	Auto-dismiss time in ms. Set to 0 for persistent.
description	string	—	Secondary text shown below the message.
dismissible	boolean	true	Show a dismiss button.
action	{ label: string; onclick: () => void }	—	Action button displayed in the toast.

ToastOverlay Props

Prop	Type	Default	Description
position	'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'	'bottom-right'	Screen position for the toast stack.

ToastManager

Prop	Type	Default	Description
add(options)	ToastOptions → string	—	Enqueue a toast; returns its ID.
success / error / warning / info	(message, partial?) → string	—	Shorthand variants of add().
dismiss(id)	void	—	Remove one toast by ID.
clear()	void	—	Remove every toast.
toasts	ToastEntry[]	—	Reactive list for debugging or custom UI.

Usage tips

Pass maxToasts to setupOverlays or the first getToastManager(max) call — it only applies when the singleton is first created.
getToastManager() returns a singleton — call it from any component or service after overlays are initialized.
Render ToastOverlay once in your root layout to display toasts.
Set duration: 0 for persistent toasts that require manual dismissal.
Use manager.clear() to dismiss all active toasts at once.