Github

Toast

Toasts show brief, non-blocking feedback messages for completed or failed actions.

Component variations

Colors

Contains four different color variations for different types of messages; Success, Error, Warning, and Info.

Toast Positions

Toasts can be displayed in 6 different positions

Persistent toast

Configure the persistence of toasts so they do not auto-dismiss.

Stack Control

Configure the maximum number of toasts that can be displayed at once using maxStack. The default is 5.

Usage Guidelines

Import

Import the ToastService in your component:

example.component.ts

Copy code

Basic Implementation

Here is a basic example of showing a toast:

1. Add the toast container component to your main layout or app component template to enable toast.

layout.html

Copy code

2. Inject the VdToastService into your component:

example.component.ts

Copy code

3. Add Toast Triggers if needed (HTML)

toast-triggers.html

Copy code

4. Implement Toast Methods (TypeScript)

example.component.ts

Copy code

Toast Configuration

Configure default toast settings globally in your app:

example.component.ts

Copy code

Persistent Toast

Show a toast that stays until manually dismissed:

toast-persistent.ts

Copy code

Toast Colors (States)

Examples of toasts for success, error, warning, and info states:

toast-colors.ts

Copy code

API Reference

Toast Interface

Property
Type
Description
Required
Default
color
'success' | 'error' | 'warning' | 'info'
Toast color
Yes
-
title
string
Optional toast title
No
—
description
string
Toast message content
Yes
—
autoDismiss
boolean
Auto dismiss after 5 seconds
No
true

Toast Configuration Interface

Property
Type
Description
Required
Default
placement
| 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'
Position where toasts will appear
No
top-right
maxStack
number
Maximum toasts visible at once
No
5

Best Practices

When to Use

  • Use Toast when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Toast when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use appropriate toast colors to indicate message type (success, error, warning, info)
  • Keep toast messages concise and actionable
  • Toasts auto-dismiss by default after 5 seconds - set autoDismiss: false for persistent messages
  • Configure toast position globally using toastService.configure() - all toasts will use that position
  • Limit maximum visible toasts using maxStack configuration to avoid cluttering the UI
  • Use descriptive titles for better context
  • Show toasts after user actions or important events
  • Consider position and maxStack based on your application layout
  • Test toast appearance on different screen sizes
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Service playground

Customize and test the toast service. Note: Position is configured globally before showing the toast.

example.ts

Copy code