Patterns
Practical promise, styling, and multi-toaster patterns.
Patterns
Promise toasts
The most common higher-level pattern is toast.promise().
toast.promise(fetchData(), {
loading: 'Fetching data...',
success: (data) => `Loaded ${data.name}`,
error: 'Could not fetch data.',
});The runtime reuses the same toast id across loading -> success/error.
Per-toast styling
toast.success('Deleted!', {
style: { background: 'red', color: 'white' },
iconTheme: { primary: 'white', secondary: 'red' },
});This is the right level when only one toast needs a custom look.
Multiple toasters
<>
<Toaster toasterId="app" position="top-right" />
<Toaster toasterId="editor" position="bottom-center" />
</>
toast.success('Saved', { toasterId: 'editor' });Each toasterId gets an independent runtime.
Dismiss all vs remove all
toast.dismiss();
toast.remove();Omitting the id applies the action to all active toasts for that runtime.
Custom rows through Toaster
<Toaster>
{(toast, { dismiss }) => (
<button onClick={dismiss}>{toast.message}</button>
)}
</Toaster>Use this when row-level control matters more than the default presentation.