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()
}
DaffStatus
Default | – |
---|---|
Description | Sets the status on a component. Options are: |
boolean
Default | false |
---|---|
Description | Whether the notification can be dismissed by the user.
Displays a close icon if |
DaffCardOrientation
Default | 'vertical' |
---|---|
Description | The orientation of a notification. |
EventEmitter
Default | – |
---|---|
Description | Emits when the notification is closed. |
<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>