Skip to main content
The Toast component displays brief, auto-dismissing notification messages to provide feedback about operations or system events.

Basic usage

import { ToastService } from '@flowx/angular-ui-toolkit';

export class MyComponent {
  constructor(private toast: ToastService) {}

  showToast() {
    this.toast.show('Operation successful!');
  }
}

Toast service methods

show
(message: string, options?: ToastOptions) => void
Shows a default toast notification
success
(message: string, options?: ToastOptions) => void
Shows a success toast with checkmark icon
error
(message: string, options?: ToastOptions) => void
Shows an error toast with error icon
warning
(message: string, options?: ToastOptions) => void
Shows a warning toast with warning icon
info
(message: string, options?: ToastOptions) => void
Shows an info toast with info icon

Toast options

interface ToastOptions {
  duration?: number;          // Auto-dismiss duration (ms), default: 3000
  position?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
  dismissible?: boolean;      // Show close button, default: true
  icon?: string;              // Custom icon
  action?: ToastAction;       // Action button
}

interface ToastAction {
  label: string;
  onClick: () => void;
}

Examples

export class ToastExamples {
  constructor(private toast: ToastService) {}

  showDefault() {
    this.toast.show('This is a notification');
  }

  showSuccess() {
    this.toast.success('Changes saved successfully!');
  }

  showError() {
    this.toast.error('Failed to save changes');
  }

  showWarning() {
    this.toast.warning('Your session will expire soon');
  }

  showInfo() {
    this.toast.info('New version available');
  }
}

Setup

Add the ToastContainer component to your app root:
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <router-outlet></router-outlet>
    <flx-toast-container></flx-toast-container>
  `
})
export class AppComponent {}

Styling

flx-toast {
  --flx-toast-min-width: 300px;
  --flx-toast-max-width: 500px;
  --flx-toast-padding: 16px;
  --flx-toast-border-radius: 8px;
  --flx-toast-background: #ffffff;
  --flx-toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --flx-toast-success-color: #10b981;
  --flx-toast-error-color: #ef4444;
  --flx-toast-warning-color: #f59e0b;
  --flx-toast-info-color: #3b82f6;
  --flx-toast-animation-duration: 300ms;
}

Toast positions

Visualization of toast positions:
┌─────────────────────────────────┐
│ top-left   top-center  top-right│
│                                  │
│                                  │
│          Page Content            │
│                                  │
│                                  │
│bottom-left bottom-center bottom-│
│                          right   │
└─────────────────────────────────┘

Accessibility

The Toast component ensures accessibility:
  • role="status" for notifications
  • role="alert" for error toasts
  • aria-live="polite" for standard toasts
  • aria-live="assertive" for error toasts
  • Screen reader announcements
  • Keyboard accessible close button (Escape key)
  • Focus management for action buttons

Best practices

  • Use success toasts for completed actions
  • Use error toasts for failed operations
  • Use warning toasts for important notices
  • Use info toasts for neutral notifications
  • Keep messages concise (one sentence)
  • Set appropriate durations (3-5 seconds typical)
  • Provide actions for recoverable errors
  • Don’t show multiple toasts for the same event
  • Stack toasts vertically for multiple notifications
  • Use consistent positioning throughout your app
For critical errors that require user action, consider using a Modal instead of a toast.
Avoid using toasts for critical information that users must read. Toasts auto-dismiss and can be missed.

Common use cases

  • Form submission confirmation
  • File upload/download status
  • Save/delete confirmation
  • Error notifications
  • Network status changes
  • Copy to clipboard confirmation
  • Background task completion
  • Session warnings
  • New content availability
  • Message - For persistent messages in content
  • Modal - For critical notifications requiring action

Build docs developers (and LLMs) love