@engie-group/fluid-design-system-angular/src/components/toast/toast.component.html

Fluid Design System Angular

<div class="nj-toast" [ngClass]="{'nj-toast--inverse': isInverse}">
  <div class="nj-toast__body">
    <nj-icon *ngIf="iconName" [name]="iconName" class="nj-toast__icon" variant="inherit"></nj-icon>
    <div class="nj-toast__content">
      <p class="nj-toast__title" [attr.id]="toastId">
        <ng-content></ng-content>
      </p>
      <p class="nj-toast__text">
        <ng-content select="[njToastBody]"></ng-content>
      </p>
    </div>
  </div>
  <div class="nj-toast__action" *ngIf="hasCloseIcon">
    <nj-icon-button
      icon="close"
      label="Close notification"
      size="sm"
      [variant]="isInverse ?  'primary' : 'inverse'"
      [ariaDescribedby]="toastId"
      (buttonClick)="close($event)"
    >
    </nj-icon-button>
  </div>
  <div class="nj-toast__gauge" *ngIf="shouldDismiss">
    <div class="nj-toast__gauge-bar" [style]="getGaugeAnimationStyles()">
      <p class="nj-sr-only">{{ gaugeLabel }}</p>
    </div>
  </div>
</div>