Toast
Transient notifications for confirmations, warnings, and system messages without interrupting the flow.
Component preview
Explore the available states and the real library behavior for this component.
zyra-toast Playground
Toast notification service - call from anywhere, auto-dismiss, persistent support
toastService.success(title, opts?)
toastService.error(title, opts?)
toastService.warning(title, opts?)
toastService.info(title, opts?)
toastService.dismiss(id)
toastService.dismissAll()
opts: description, duration (0 = persistent)
import { inject } from '@angular/core';
import { ZyraToastService } from 'zyra-ng-ui';
const toastService = inject(ZyraToastService);
toastService.success('Operation completed', {
description: 'Your changes have been saved.',
duration: 4000,
});
// Place this once in your app template
<zyra-toast-container />Copy-paste example
Drop this into your Angular standalone component and it works out of the box.
import { Component, inject } from '@angular/core';
import {
ZyraButton,
ZyraToastContainer,
ZyraToastService,
} from 'zyra-ng-ui';
@Component({
selector: 'app-demo-toast',
standalone: true,
imports: [ZyraButton, ZyraToastContainer],
template: `
<zyra-button variant="primary" (clicked)="showSavedToast()">
Show success toast
</zyra-button>
<zyra-toast-container />
`,
})
export class DemoToastComponent {
private readonly toast = inject(ZyraToastService);
showSavedToast(): void {
this.toast.success('Saved successfully', {
description: 'Your profile changes are now live.',
});
}
}
Variants
All the visual modes and states available for this component.
successConfirms a completed action (green)
infoNeutral informational message (blue)
warningCautionary notice that may need attention (amber)
errorFailed action or critical issue (red)
API
All inputs and configuration options for zyra-toast-container.
| Prop | Type | Default | Description |
|---|---|---|---|
toast.success() | (title, options?) => void | - | Show a success toast via ZyraToastService |
toast.info() | (title, options?) => void | - | Show an info toast |
toast.warning() | (title, options?) => void | - | Show a warning toast |
toast.error() | (title, options?) => void | - | Show an error toast |
options.description | string | - | Secondary body text below the title |
options.duration | number | 4000 | Auto-dismiss delay in milliseconds |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Toast container uses role="region" with an aria-label for screen reader announcement
- Success/info toasts use aria-live="polite"; error toasts use aria-live="assertive"
- Each toast includes a visible dismiss button with an accessible label
- Toasts do not auto-dismiss during keyboard navigation to prevent losing context