Toast

Toasts are notifications that provide application-level information. They are designed to mimic push notifications and appear temporarily on the screen.

Usage

API

Services

DaffToastService

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

Service to display toasts.

@Injectable()
class DaffToastService implements OnDestroy {
  open(
    toast: DaffToastData
    configuration?: Partial<DaffToastConfiguration>
  ): DaffToast
  close(toast: DaffToast): void
}

() Methods

Parameters

Parameter	`toast: DaffToastData`
Description	Data that can be shown on a toast.

Parameter	`configuration: Partial<DaffToastConfiguration>`
Description	Additional configuration options such as duration. The default duration is set to `5000ms`.

Parameters

Parameter	`toast: DaffToast`
Description	The instance of toast that you wish to close.

Types

DaffToastConfiguration

import { DaffToastConfiguration } from '@daffodil/design/toast'

Defines optional settings that control the behavior of a toast.

interface DaffToastConfiguration {
  duration: number
}

Properties

duration `number`
The duration (in milliseconds) the toast remains visible before dismissal. By default, toasts without actions are dismissed after `5000ms`. While a duration can be set for actionable toasts, it is not recommended since users should have sufficient time to interact with the actions.

duration

number

The duration (in milliseconds) the toast remains visible before dismissal. By default, toasts without actions are dismissed after 5000ms.

While a duration can be set for actionable toasts, it is not recommended since users should have sufficient time to interact with the actions.

DaffToast

import { DaffToast } from '@daffodil/design/toast'

A toast instance.

interface DaffToast {
  dismiss: () => void
  dismissalStream: Observable<void>
}

Properties

dismiss `() => void`
Closes the toast.

dismissalStream `Observable<void>`
Emits when the toast has been closed.

DaffToastData

import { DaffToastData } from '@daffodil/design/toast'

Data that defines the content and behavior of a toast.

interface DaffToastData {
  title: string
  message: string
  status: DaffStatus
  actions: DaffToastAction[]
  dismissible: boolean
}

Properties

title `string`
The primary text that summarizes the purpose of the toast.

message `string`
Provides additional details or context about the toast.

status `DaffStatus`
The visual status of the toast.

actions `DaffToastAction[]`
Used to display actionable buttons related to the toast.

dismissible `boolean`
Whether the toast can be manually dismissed with a close button.

DaffToastAction

import { DaffToastAction } from '@daffodil/design/toast'

Configuration for an action button inside a toast. Actions are rendered using DaffButtonComponent.

interface DaffToastAction {
  type: DaffToastActionButtonType
  content: string
  size: DaffToastActionButtonSize
  color: DaffPalette
  status: DaffStatus
  data: Record<string, any>
  eventEmitter: EventEmitter<DaffToastAction>
}

Properties

type `DaffToastActionButtonType`
The type of button. Matches one of the predefined types supported by `DaffButtonComponent`.

type

DaffToastActionButtonType

The type of button.

Matches one of the predefined types supported by DaffButtonComponent.

content `string`
The text displayed on the button.

size `DaffToastActionButtonSize`
The button size. Matches one of the predefined sizes supported by `DaffButtonComponent`.

size

DaffToastActionButtonSize

The button size.

Matches one of the predefined sizes supported by DaffButtonComponent.

color `DaffPalette`
The button color. Do not use both `color` and `status` simultaneously.

color

DaffPalette

The button color.

Do not use both color and status simultaneously.

status `DaffStatus`
The button status. Do not use both `color` and `status` simultaneously.

status

DaffStatus

The button status.

Do not use both color and status simultaneously.

data `Record<string, any>`
Data associated with the action.

eventEmitter `EventEmitter<DaffToastAction>`
Emits when the action is triggered.

DaffToastActionButtonSize

import { DaffToastActionButtonSize } from '@daffodil/design/toast'

The available button sizes that can be used in DaffToastAction. These correspond to the types supported by DaffButtonComponent.

type DaffToastActionButtonSize = 'sm' | 'md' | 'lg' | undefined

DaffToastActionButtonType

import { DaffToastActionButtonType } from '@daffodil/design/toast'

The available button styles that can be used in DaffToastAction. These correspond to the types supported by DaffButtonComponent.

type DaffToastActionButtonType = 'raised' | 'underline' | 'stroked' | 'flat' | undefined

DaffToastOptions

import { DaffToastOptions } from '@daffodil/design/toast'

interface DaffToastOptions {
  position: DaffToastPosition
}

Properties

position `DaffToastPosition`
The position of all toasts.

DaffToastPosition

import { DaffToastPosition } from '@daffodil/design/toast'

type DaffToastPosition = DaffToastVerticalPositionInterface & DaffToastHorizontalPositionInterface

DaffToastVerticalPosition

import { DaffToastVerticalPosition } from '@daffodil/design/toast'

The available vertical positions for toasts.

type DaffToastVerticalPosition = 'top' | 'bottom'

DaffToastHorizontalPosition

import { DaffToastHorizontalPosition } from '@daffodil/design/toast'

The available horizontal positions for toasts.

type DaffToastHorizontalPosition = 'left' | 'center' | 'right'

Constants

provideDaffToast

import { provideDaffToast } from '@daffodil/design/toast'

Registers the DaffToastService for displaying a toast. This provider ensures toasts function correctly within your application.

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

@NgModule({
    providers: [
   provideDaffToast({
     position: {
       vertical: 'bottom',
       horizontal: 'left',
     },
   }),
 ]
)}
export class AppModule {}

const provideDaffToast: (config?: DaffToastOptions) => Provider[]