Notification

A notification provides contextual feedback or information related to user actions within a page's content.

Components

DaffNotificationComponent

import { DaffNotificationComponent } from '@daffodil/design/notification'

Notifications provide contextual feedback or information related to user actions within a page's content.

Use Toast for app-level alerts.

@Component()
class DaffNotificationComponent {
  @Input() status: DaffStatus
  @Input() dismissible: boolean = false
  @Input() orientation: DaffCardOrientation = 'vertical'

  @Output() closeNotification: EventEmitter<void> = new EventEmitter()
}

Inputs

status

DaffStatus

Default –

Description

Sets the status on a component.

Options are: info, warn, critical, and success.

dismissible

boolean

Default	`false`
Description	Whether the notification can be dismissed by the user. Displays a close icon if `true`.

orientation

DaffCardOrientation

Default	`'vertical'`
Description	The orientation of a notification.

Outputs

closeNotification

EventEmitter

Default	–
Description	Emits when the notification is closed.

Directives

DaffNotificationActionsDirective

import { DaffNotificationActionsDirective } from '@daffodil/design/notification'

Actions is used to include actionable buttons related to the notification (e.g., dismiss, navigate).

@Directive()
class DaffNotificationActionsDirective {}

DaffNotificationTitleDirective

import { DaffNotificationTitleDirective } from '@daffodil/design/notification'

Title is the primary text summarizing the notification.

@Directive()
class DaffNotificationTitleDirective {}

DaffNotificationSubtitleDirective

Deprecated

import { DaffNotificationSubtitleDirective } from '@daffodil/design/notification'

@Directive()
class DaffNotificationSubtitleDirective {}

DaffNotificationMessageDirective

import { DaffNotificationMessageDirective } from '@daffodil/design/notification'

Message provides additional details or supporting context that supplements the notification title. Keep this brief—ideally one to two short sentences.

@Directive()
class DaffNotificationMessageDirective {}

Modules

DaffNotificationModule

Deprecated

import { DaffNotificationModule } from '@daffodil/design/notification'

@NgModule()
class DaffNotificationModule {}

Types

DaffNotificationOrientation

import { DaffNotificationOrientation } from '@daffodil/design/notification'

The available orientations for a notification.

Orientation	Description
`vertical`	Stacks notification content from top to bottom. This is the default orientation.
`horizontal`	Places notification content side-by-side.

type DaffNotificationOrientation = 'horizontal' | 'vertical'

DaffNotificationOrientationEnum

import { DaffNotificationOrientationEnum } from '@daffodil/design/notification'

Enum for representing the available notification orientations. See DaffNotificationOrientation for descriptions of each orientation.

enum DaffNotificationOrientationEnum {
  Horizontal = DaffNotificationOrientationEnum.Horizontal,
  Vertical = DaffNotificationOrientationEnum.Vertical,
}