Sonner

Stacked toast notifications.

import { BuiSonner, BuiToaster } from 'ng-blatui';

// render once: <bui-sonner />
toaster = inject(BuiToaster);
this.toaster.show({ title: 'Saved', tone: 'success' });

Tones

// tone: 'default' | 'success' | 'error' | 'warning' | 'info'
this.toaster.show({ title: 'Something went wrong', tone: 'error' });
this.toaster.show({ title: 'Storage almost full', tone: 'warning' });

Rich content

this.toaster.show({ title: 'Deployment ready', description: 'Your site is live.' });

With action

// ToastOptions.action renders an inline button
this.toaster.show({ title: 'Message archived', action: { label: 'Undo', onClick: () => restore() } });

Stack

// call show() several times — they stack
this.toaster.show({ title: 'File uploaded' });
this.toaster.show({ title: 'Comment posted', tone: 'success' });

Promise

// loading toast (duration: 0) → dismiss → success
const id = this.toaster.show({ title: 'Saving…', duration: 0 });
setTimeout(() => { this.toaster.dismiss(id); this.toaster.show({ title: 'Saved', tone: 'success' }); }, 1500);