<button
  [type]="resolvedType()"
  [class]="buttonClass()"
  [disabled]="isDisabled()"
  [attr.aria-label]="
    ariaLabel() ||
    resolvedLabel() ||
    title() ||
    'Button'
  "
  [attr.aria-busy]="loading() ? true : null"
  (click)="onClick($event)"
>
  <span class="inline-flex items-center justify-center gap-1">
    @if (loading()) {
      <span
        class="inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
        aria-hidden="true"
      ></span>
    }

    @if (
      !loading() &&
      showIcon() &&
      resolvedIcon() &&
      iconPosition() === 'left'
    ) {
      <i
        [class]="resolvedIconClass()"
        aria-hidden="true"
      ></i>
    }

    @if (!iconOnly()) {
      <span>
        @if (loading() && loadingLabel()) {
          {{ loadingLabel() }}
        } @else {
          {{ resolvedLabel() }}
        }
      </span>
    }

    @if (
      !loading() &&
      showIcon() &&
      resolvedIcon() &&
      iconPosition() === 'right'
    ) {
      <i
        [class]="resolvedIconClass()"
        aria-hidden="true"
      ></i>
    }
  </span>
</button>