# Toast Transient feedback for confirmations, warnings, and errors. Use `ToastComponent` for inline previews and layouts, and pair `ToastService` with `ToastContainerComponent` for stacked notifications from application logic. ## Import ```ts import { ToastComponent, ToastContainerComponent, ToastService } from 'ui'; ``` ## Toast service and container ```ts import { Component, inject } from '@angular/core'; import { ButtonComponent, ToastContainerComponent, ToastService } from 'ui'; @Component({ selector: 'app-toast-service-example', standalone: true, imports: [ButtonComponent, ToastContainerComponent], template: `
Primary Secondary Info Success Warning Error Reset
`, }) export class ToastServiceExampleComponent { private readonly toast = inject(ToastService); pushPrimary(): void { this.toast.add({ variant: 'primary', appearance: 'filled', title: 'Primary', message: 'Queued with variant primary.', duration: 5000, }); } pushSecondary(): void { this.toast.add({ variant: 'secondary', appearance: 'filled', title: 'Secondary', message: 'Queued with variant secondary.', duration: 5000, }); } pushInfo(): void { this.toast.info('Information', 'Queued from ToastService.info().'); } pushSuccess(): void { this.toast.success('Success', 'Queued from ToastService.success().'); } pushWarn(): void { this.toast.warn('Warning', 'Queued from ToastService.warn().'); } pushError(): void { this.toast.error('Error', 'Queued from ToastService.error().'); } clearAll(): void { this.toast.clear(); } } ``` ## Basic toast ```ts import { Component } from '@angular/core'; import { ButtonComponent, ToastComponent } from 'ui'; @Component({ selector: 'app-toast-basic-example', standalone: true, imports: [ButtonComponent, ToastComponent], template: `
Reset
`, }) export class ToastBasicExampleComponent { visible = true; reset(): void { this.visible = true; } } ``` ## Variants ```ts import { Component } from '@angular/core'; import { ButtonComponent, ToastComponent } from 'ui'; @Component({ selector: 'app-toast-variants-example', standalone: true, imports: [ButtonComponent, ToastComponent], template: `
Reset
`, }) export class ToastVariantsExampleComponent { vPrimary = true; vSecondary = true; vInfo = true; vSuccess = true; vWarning = true; vDanger = true; reset(): void { this.vPrimary = this.vSecondary = this.vInfo = this.vSuccess = this.vWarning = this.vDanger = true; } } ``` ## Appearance ```ts import { Component } from '@angular/core'; import { ButtonComponent, ToastComponent } from 'ui'; @Component({ selector: 'app-toast-appearance-example', standalone: true, imports: [ButtonComponent, ToastComponent], template: `
Reset
`, }) export class ToastAppearanceExampleComponent { vFilled = true; vOutline = true; vSubtle = true; vTint = true; vTransparent = true; reset(): void { this.vFilled = this.vOutline = this.vSubtle = this.vTint = this.vTransparent = true; } } ``` ## Sizes ```ts import { Component } from '@angular/core'; import { ButtonComponent, ToastComponent } from 'ui'; @Component({ selector: 'app-toast-sizes-example', standalone: true, imports: [ButtonComponent, ToastComponent], template: `
Reset
`, }) export class ToastSizesExampleComponent { vSmall = true; vMedium = true; vLarge = true; reset(): void { this.vSmall = this.vMedium = this.vLarge = true; } } ``` ## Dismiss, icon, and progress ```ts import { Component } from '@angular/core'; import { ButtonComponent, ToastComponent } from 'ui'; @Component({ selector: 'app-toast-options-example', standalone: true, imports: [ButtonComponent, ToastComponent], template: `
Reset
`, }) export class ToastOptionsExampleComponent { vProgress = true; vNoIcon = true; vNoDismiss = true; reset(): void { this.vProgress = this.vNoIcon = this.vNoDismiss = true; } } ``` ## Sticky (ToastService) ```ts import { Component, inject } from '@angular/core'; import { ButtonComponent, ToastService } from 'ui'; @Component({ selector: 'app-toast-sticky-example', standalone: true, imports: [ButtonComponent], template: `
Sticky toast Reset
`, }) export class ToastStickyExampleComponent { private readonly toast = inject(ToastService); pushSticky(): void { this.toast.add({ variant: 'warning', appearance: 'filled', title: 'Sticky', message: 'ToastService skips auto-removal until dismiss or Reset.', sticky: true, duration: 8000, }); } clearAll(): void { this.toast.clear(); } } ``` ## Custom content and actions ```ts import { Component, inject, TemplateRef, viewChild } from '@angular/core'; import { ButtonComponent, ToastService } from 'ui'; @Component({ selector: 'app-toast-actions-example', standalone: true, imports: [ButtonComponent], template: `
Conference room B · Building 2 Teams link was copied—paste into chat if guests join late.
Accept Propose new time
Projects / Media 9.2 GB / 10 GB
Manage storage
card_···4196 · declined (insufficient funds)
Retry payment Update card
12 files 2 duplicates skipped
Full report in Activity → Backup.
Reset Meeting invite Storage warning Payment failed Backup summary
`, }) export class ToastActionsExampleComponent { private readonly inviteTpl = viewChild.required>('invite'); private readonly quotaTpl = viewChild.required>('quota'); private readonly paymentTpl = viewChild.required>('payment'); private readonly backupTpl = viewChild.required>('backup'); private readonly toast = inject(ToastService); pushInvite(): void { this.toast.add({ title: 'Meeting invite · Product sync', message: 'Alex Chen invited you for tomorrow 10:00–10:45.', variant: 'info', appearance: 'filled', contentTemplate: this.inviteTpl(), duration: 12000, }); } pushQuota(): void { this.toast.add({ title: 'Storage almost full', message: 'Uploads will pause soon unless you free space or upgrade.', variant: 'warning', appearance: 'filled', contentTemplate: this.quotaTpl(), duration: 15000, }); } pushPayment(): void { this.toast.add({ title: 'Payment could not be processed', message: 'Your subscription renewal failed. No charges were made.', variant: 'danger', appearance: 'filled', contentTemplate: this.paymentTpl(), duration: 12000, showProgress: false, }); } pushBackup(): void { this.toast.add({ title: 'Backup finished', message: '', variant: 'success', appearance: 'filled', contentTemplate: this.backupTpl(), duration: 9000, }); } reset(): void { this.toast.clear(); } } ``` ## Accessibility ### Role and live region The root uses `role="alert"`. `aria-live` is `assertive` for the danger variant and `polite` for others so assistive technologies prioritize errors without shouting over every hint. | Variant | Live region | | --- | --- | | `danger` | `assertive` | | all other variants | `polite` | ### Keyboard and actions Toast itself is not a focus trap. Keyboard interaction depends on whether dismiss and action buttons are rendered. | Element | Keyboard behavior | | --- | --- | | dismiss button | standard button keyboard support | | projected actions | standard keyboard support from the projected control | | non-interactive toast body | announced through the live region rather than focused | ### Dismiss and progress When `dismissible` is true, the dismiss control is a `ButtonComponent`; keep toast copy concise so the name and message remain the primary announcement. The progress strip is decorative timing feedback. Critical status should still appear in `title` and `message` instead of relying on the countdown bar.