DaffNotificationComponent

class

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.

Examples

<daff-notification>
 <fa-icon daffPrefix [icon]="faExclamation"></fa-icon>
 <div daffNotificationTitle>Payment Failed</div>
 <div daffNotificationMessage>We were unable to process your payment for order #12345. Please update your payment details and try again.</div>
 <div daffNotificationActions>
   <button daff-button>Update payment</button>
   <button daff-button>Contact support</button>
 </div>
</daff-notification>

<daff-notification>
 <fa-icon daffPrefix [icon]="faExclamation"></fa-icon>
 <div daffNotificationTitle>Payment Failed</div>
 <div daffNotificationMessage>We were unable to process your payment for order #12345. Please update your payment details and try again.</div>
 <div daffNotificationActions>
   <button daff-button>Update payment</button>
   <button daff-button>Contact support</button>
 </div>
</daff-notification>