Toast

A succinct message that is displayed temporarily.

Preview Code
Interactive

Features

  • Multiple variants (default, success, error, warning, info).
  • Auto-dismiss with configurable duration.
  • Swipe to dismiss support.
  • Action buttons.
  • Multiple toast positioning options.
  • Accessible announcements.

Installation

Install the component from your command line.

Angular CLInpmpnpmyarnbun
Bash
ng g @ng-cn/core:c toast

Anatomy

Import all parts and piece them together.

Typescript
import {
  Toaster,
  ToastService
} from '@/ui/toast';

// Or individual components:
import {
  Toast,
  ToastTitle,
  ToastDescription,
  ToastAction
} from '@/ui/toast';
Html
<!-- Add Toaster to your app root -->
<Toaster />

<!-- Use ToastService to show toasts -->
// this.toastService.success({ title: 'Success!' });

API Reference

ToastService

Service for managing toast notifications.

PropTypeDefault
toasts Signal<Toast[]> —
Reactive list of active toasts.

Toaster

Container component that renders all active toasts.

PropTypeDefault
position 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' 'bottom-right'
Position of the toast container.
class string —
Additional CSS classes to apply.

Toast

Individual toast notification component.

PropTypeDefault
variant 'default' | 'success' | 'error' | 'warning' | 'info' 'default'
Visual variant of the toast.
showIcon boolean true
Whether to display the variant icon.
isVisible boolean true
Controls animation state.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"open" | "closed"
[data-swipe]"start" | "move" | "cancel" | "end"

CSS Variables

VariableDescription
--radix-toast-swipe-move-xSwipe position during drag.
--radix-toast-swipe-end-xFinal swipe position.

ToastTitle

Title text for a toast notification.

PropTypeDefault
class string —
Additional CSS classes to apply.

ToastDescription

Description text for a toast notification.

PropTypeDefault
class string —
Additional CSS classes to apply.

ToastAction

Action button displayed within a toast.

PropTypeDefault
altText string —
Alt text for accessibility within destructive toasts.
class string —
Additional CSS classes to apply.

Examples

Basic

Show a simple toast notification.

Html
// In your component:
toastService = inject(ToastService);

showToast() {
  this.toastService.toast({
    title: 'Scheduled: Catch up',
    description: 'Friday, February 10, 2023 at 5:57 PM',
  });
}

// In template:
<Button (click)="showToast()">Show Toast</Button>

With variants

Different toast variants for different message types.

Html
// Success
this.toastService.success({
  title: 'Success!',
  description: 'Your changes have been saved.',
});

// Error
this.toastService.error({
  title: 'Error',
  description: 'Something went wrong.',
});

// Warning
this.toastService.warning({
  title: 'Warning',
  description: 'This action cannot be undone.',
});

// Info
this.toastService.info({
  title: 'Info',
  description: 'New features are available.',
});

With action

Toast with an action button.

Html
this.toastService.error({
  title: 'Uh oh! Something went wrong.',
  description: 'There was a problem with your request.',
  action: {
    label: 'Try again',
    onClick: () => this.retryRequest(),
  },
});

Persistent toast

Toast that does not auto-dismiss.

Html
const id = this.toastService.info({
  title: 'Uploading...',
  description: 'Please wait while we upload your file.',
  duration: 0, // Won't auto-dismiss
});

// Later, dismiss manually
this.toastService.dismiss(id);

Custom position

Position toasts at different locations.

Html
<Toaster position="top-center" />

Accessibility

Adheres to the Alert WAI-ARIA design pattern .

Keyboard Interactions

KeyDescription
Escape Closes the focused toast.
Tab Moves focus to the action button or close button.