Toast

Overview

Toasts communicate updates about actions or events that require attention but are not directly tied to specific page content.

For short messages tied to page-level content or actions, use the notification component.

<button daff-button size="sm" (click)="open()">Show toast</button>

Usage

Add provideDaffToast() to your application's root providers:

import { ApplicationConfig } from '@angular/core';
import { provideDaffToast } from '@daffodil/design/toast';

export const appConfig: ApplicationConfig = {
  providers: [
    provideDaffToast(),
  ],
};

Then inject DaffToastService to open toasts from your component:

import { DaffToastService } from '@daffodil/design/toast';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
})
export class CustomComponent {
  constructor(private toastService: DaffToastService) {}
}

Anatomy

A toast is composed of a title, message, and optional actions:

this.toastService.open({
  title: 'Update available',
  message: 'A new version of this page is available.',
  actions: [
    { content: 'Update', color: 'theme-contrast', size: 'sm' },
    { content: 'Remind me later', type: 'flat', size: 'sm' },
  ],
});

• title: The primary text that summarizes the purpose of the toast.
• message: Additional details or context about the toast. Keep this brief — ideally one to two short sentences.
• actions: Actionable buttons related to the toast. A maximum of two buttons is recommended to keep the toast concise.

Features

Dismissal

Toasts can be dismissed automatically via a timed duration or manually with a close button. Both duration and dismissible can be configured when opening a toast with the DaffToastService.

By default, toasts without actions dismiss automatically after 5000ms. Toasts with actions remain visible until dismissed manually or until an action is taken.

<button daff-button size="sm" (click)="open()">Show toast</button>

For non-actionable toasts, set dismissible: true to display a close button. When a toast contains actions, the dismissible property is ignored.

<button daff-button size="sm" (click)="open()">Show toast</button>

Stack limit

A maximum of three toasts can be displayed at once. Toasts stack vertically with the most recent toast at the top.

Statuses

Toast status can be set when opening a toast through the DaffToastService by using a DaffStatus value.

<button daff-button size="sm" (click)="open()">Show toast</button>

<select [formControl]="statusControl">
  <option value="success">Success</option>
  <option value="warn">Warn</option>
  <option value="critical">Critical</option>
</select>

Positions

On desktop, toasts appear in the top-right corner by default. Customize their position using the position property in provideDaffToast():

providers: [
  provideDaffToast({
    position: {
      vertical: 'bottom',
      horizontal: 'right',
    },
  }),
],

Note

On mobile, toasts always appear in the bottom-center position, regardless of configuration settings.

Best practices

• Keep messages brief — toasts are temporary and easy to miss.
• Limit actions to two buttons so the toast stays scannable.
• Avoid setting a duration on actionable toasts, as they may disappear before the user can interact with them.

Accessibility

Built-in behavior

• Toasts without actions use role="status" (equivalent to aria-live="polite"), announcing messages without interrupting the user.
• Toasts with actions use role="alertdialog", are focus trapped, and focus moves immediately to the actions.
• ESC dismisses a focus trapped actionable toast.

Developer responsibilities

• Avoid setting a duration on actionable toasts so users have time to interact with them.