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

Fluid Design System Angular

<button
  class="nj-btn"
  [type]="type"
  (click)="buttonClick.emit($event)"
  [disabled]="isDisabled"
  [ngClass]="[getButtonEmphasisClass(), getButtonVariantClass(), getButtonSizeClass(), getButtonIsLoadingClass()]"
  [attr.tabindex]="tabIndex ? tabIndex : null"
  [attr.aria-label]="ariaLabel ? ariaLabel : null"
>
  <ng-container *ngIf="!isLoading">
    <ng-container *ngTemplateOutlet="itemContent"></ng-container>
  </ng-container>
  <ng-container *ngIf="isLoading">
    <ng-container *ngTemplateOutlet="itemSpinner"></ng-container>
  </ng-container>
</button>

<ng-template #itemContent>
  <span *ngIf="hasCustomIcon || icon" class="nj-btn__icon">
    <nj-icon *ngIf="icon" [name]="icon" size="inherit" variant="inherit"></nj-icon>
    <ng-container *ngIf="!icon">
      <ng-content select="[custom-icon]"></ng-content>
    </ng-container>
  </span>
  <ng-content></ng-content>
</ng-template>

<ng-template #itemSpinner>
  <nj-spinner [isLoading]="true" [isBlock]="false" />
</ng-template>