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]="faHeart"></fa-icon>
  <div daffNotificationTitle>Saved to your wishlist</div>
  <div daffNotificationMessage>Daffodil Hoodie (Size M) was added to your wishlist.</div>
  <div daffNotificationActions>
    <button daff-button size="sm" color="theme-contrast">View wishlist</button>
    <button daff-flat-button size="sm" color="theme-contrast">Continue shopping</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

Import DAFF_NOTIFICATION_COMPONENTS into your 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 {}

Deprecation notice:

DaffNotificationModule is deprecated. Use the standalone component imports instead.

Anatomy

A notification is composed of a container with a title, message, and optional icon and actions:

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

• <daff-notification>: The wrapper component that contains all notification content.
• [daffPrefix]: A decorative icon that provides a quick visual cue about the notification's purpose.
• [daffNotificationTitle]: The primary text summarizing the notification.
• [daffNotificationMessage]: Additional details or context. Keep this brief—ideally one to two short sentences.
• [daffNotificationActions]: Actionable buttons related to the notification (e.g. dismiss, navigate). A maximum of two buttons is recommended to keep the notification concise.

Features

Status

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

<daff-form-field>
  <daff-form-label>Status</daff-form-label>
  <daff-select [options]="options" [formControl]="statusControl">
    <ng-template daffSelectOption let-option="option">
      {{ option.label }}
    </ng-template>
  </daff-select>
</daff-form-field>

<daff-notification [status]="statusControl.value?.value">
  @if (statusControl.value?.value === 'warn' || statusControl.value?.value === 'critical') {
  <fa-icon daffPrefix [icon]="faExclamation" [fixedWidth]="true"></fa-icon>
  } @else {
  <fa-icon daffPrefix [icon]="faCheck" [fixedWidth]="true"></fa-icon>
  }
  <div daffNotificationTitle>{{ statusControl.value?.title }}</div>
  <div daffNotificationMessage>{{ statusControl.value?.message }}</div>
</daff-notification>

Orientation

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

<daff-form-field>
  <daff-form-label>Orientation</daff-form-label>
  <daff-select [options]="options" [formControl]="orientationControl">
    <ng-template daffSelectOption let-option="option">
      {{ option.label }}
    </ng-template>
  </daff-select>
</daff-form-field>

<daff-notification [orientation]="orientationControl.value?.value">
  <fa-icon daffPrefix [icon]="faCheck" [fixedWidth]="true"></fa-icon>
  <div daffNotificationTitle>Changes saved</div>
  <div daffNotificationMessage>Your profile details have been updated.</div>
</daff-notification>

Dismissable 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]="faTruck"></fa-icon>
  <div daffNotificationTitle>Free shipping unlocked</div>
  <div daffNotificationMessage>Your order qualifies for free standard shipping.</div>
</daff-notification>
}

Accessibility

Built-in behavior

• Notifications with critical or warn status use role="alert" for immediate announcement by assistive technologies, while all other notifications use role="status" for non-interruptive announcements. See live region roles for more information.
• Notifications include tabindex="0" so they can be discovered by keyboard users.