Toast
@xui/toastThe stack the toaster renders its live notices into.
Install
pnpm add @xui/toast Add the barrel to a standalone component's imports:
import { XuiToastImports } from '@xui/toast';
@Component({
imports: [XuiToastImports],
// …
})Examples
Default
Source only — this one needs a component of its own to run, so there is nothing to render here.
<div class="flex flex-wrap gap-2">
<button xuiButton (click)="toaster.show({ message: 'Changes saved.', color: 'success' })">Success</button>
<button
xuiButton
variant="outline"
(click)="toaster.show({ message: 'Heads up — check your input.', color: 'warning' })"
>
Warning
</button>
<button
xuiButton
color="error"
(click)="
toaster.show({ message: 'Upload failed.', color: 'error', actionText: 'Retry', onAction: retry, timeout: 0 })
"
>
Error + action
</button>
<button xuiButton variant="ghost" (click)="toaster.show({ message: 'Just so you know.', color: 'primary' })">
Info
</button>
<button xuiButton variant="ghost" (click)="toaster.clear()">Clear all</button>
</div>API
The stack the toaster renders its live notices into.
A single toast notice. Presentational — the toaster owns the list, timers and placement; this only renders one entry and reports the two things a user can do to it: run its action, or dismiss it.
Inputs
toastXuiToastDataThe notification to render: its message, colour, icon and optional action. Normally supplied by the toast service rather than bound by hand.Outputs
actionClickedvoidEmits when the toast's action button is pressed.dismissedvoidEmits when the toast is dismissed, whether by its close button or by timing out.