Star
Back to components

Toast

zyra-toast-container
FeedbackZyraToastContainer

Component preview

Explore the available states and the real library behavior for this component.

Live previewZyraToastContainer

zyra-toast Playground

successerrorwarninginfo

Toast notification service - call from anywhere, auto-dismiss, persistent support

Controls
variant
title
description
duration (ms)
persistent
Service API

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)

Live Preview - toasts appear bottom-right success4s
✓
Operation completedYour changes have been saved.
Generated Code
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 />
All Variants click to fire each
✓
success
Saved successfully!
fire
✕
error
Something went wrong
fire
⚠
warning
Session expiring soon
fire
ⓘ
info
New update available
fire
Real World Scenarios click to demo
Form saved
After a successful form submit
Network error
API call fails, shows for 6s
Session warning
Auth token expiring, shows for 8s
New message
Real-time notification event
Multiple in sequence
Upload -> processing -> done
Persistent toast
duration: 0 - stays until dismissed
Usage code
zyra-toast-container
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.',
    });
  }
}
Success, info, warning, error flowsGreat for action confirmationFits app-wide feedback