Notification

Overview

Notifications display short messages that are closely associated with nearby content or actions. They're commonly used to confirm actions, display warnings, or provide contextual information within a specific area of the page.

Notifications should not be used to display app-level alerts. For global messages, use the Toast component.

<daff-notification>
  <fa-icon daffPrefix [icon]="faInfoCircle"></fa-icon>
  <div daffNotificationTitle>Title</div>
  <div daffNotificationMessage>Additional details about this notification.</div>
  <div daffNotificationActions>
    <button daff-button size="sm" color="theme-contrast">Confirm</button>
    <button daff-flat-button size="sm" color="theme-contrast">Cancel</button>
  </div>
</daff-notification>

Best practices

When to use

• Confirming user actions within a specific page area
• Displaying warnings or alerts related to nearby content
• Providing contextual feedback for forms or operations

Usage

Within a standalone component

To use notification in a standalone component, import DAFF_NOTIFICATION_COMPONENTS directly into your custom component:

import { DAFF_NOTIFICATION_COMPONENTS } from '@daffodil/design/notification';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_NOTIFICATION_COMPONENTS,
  ],
})
export class CustomComponent {}

Within a module (deprecated)

To use notification in a module, import DaffNotificationModule into your custom module:

import { NgModule } from '@angular/core';
import { DaffNotificationModule } from '@daffodil/design/notification';
import { CustomComponent } from './custom.component';

@NgModule({
    declarations: [
    CustomComponent,
  ],
  exports: [
    CustomComponent,
  ],
  imports: [
    DaffNotificationModule,
  ],
})
export class CustomComponentModule { }

This method is deprecated. It's recommended to update all custom components to standalone.

Anatomy

A notification consists of the following components, displayed in the order listed:

Container

<daff-notification>: The wrapper component that contains all notification content.

Icon

Use the [daffPrefix] element to add a decorative icon that provides a quick visual cue about the notification's purpose.

Title

[daffNotificationTitle]: The primary text summarizing the notification.

Message

[daffNotificationMessage]: Provides additional details or context. Keep this brief—ideally one to two short sentences.

Actions

[daffNotificationActions]: Include actionable buttons related to the notification (e.g., dismiss, navigate). A maximum of two buttons is recommended to keep the notification concise.

Basic structure

<daff-notification>
  <fa-icon daffPrefix></fa-icon>
  <div daffNotificationTitle>Notification title</div>
  <div daffNotificationMessage>Additional details about this notification.</div>
  <div daffNotificationActions>
    <button daff-button>Confirm</button>
    <button daff-button>Cancel</button>
  </div>
</daff-notification>

Features

Status

Use the status property to visually differentiate between notification types such as info, warn, critical, or success.

<daff-notification [status]="statusControl.value">
  @if (statusControl.value === 'info' || statusControl.value === '') {
  <fa-icon daffPrefix [icon]="faCheck" [fixedWidth]="true"></fa-icon>
  } @if (statusControl.value === 'success') {
  <fa-icon daffPrefix [icon]="faCheck" [fixedWidth]="true"></fa-icon>
  } @if (statusControl.value === 'warn') {
  <fa-icon daffPrefix [icon]="faExclamation" [fixedWidth]="true"></fa-icon>
  } @if (statusControl.value === 'critical') {
  <fa-icon daffPrefix [icon]="faExclamation" [fixedWidth]="true"></fa-icon>
  }
  <div daffNotificationTitle>Title</div>
  <div daffNotificationMessage>Additional details about this notification.</div>
</daff-notification>

<select [formControl]="statusControl">
  <option value="">Default</option>
  <option value="info">Informational</option>
  <option value="success">Success</option>
  <option value="warn">Warn</option>
  <option value="critical">Critical</option>
</select>

Orientation

Use the orientation property to stack notification content either vertical (default) or horizontal.

<daff-notification [orientation]="orientationControl.value">
  <fa-icon daffPrefix [icon]="faCheck" [fixedWidth]="true"></fa-icon>
  <div daffNotificationTitle>Title</div>
  <div daffNotificationMessage>Additional details about this notification.</div>
</daff-notification>

<select [formControl]="orientationControl">
  <option value="vertical">Vertical</option>
  <option value="horizontal">Horizontal</option>
</select>

Dismissing a notification

Notifications are persistent by default. To display a close button, set the dismissible property to true.

Avoid making critical notifications dismissible to ensure users can read or interact with the necessary information.

@if (!hidden) {
<daff-notification dismissible="true" (closeNotification)="hideNotification()">
  <fa-icon daffPrefix [icon]="faInfoCircle"></fa-icon>
  <div daffNotificationTitle>Title</div>
  <div daffNotificationMessage>Additional details about this notification.</div>
</daff-notification>
}

Accessibility

Live region roles:

• Notifications with critical or warn status use role="alert" for immediate announcement by assistive technologies.
• All other notifications use role="status" for non-interruptive announcements.

See live region roles for more information.

Keyboard focus:

• Notifications include tabindex="0" so they can be discovered by keyboard users.