GitHub

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
Defaultfalse
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>