<button
  class="sky-btn sky-btn-default sky-filter-btn"
  type="button"
  [attr.aria-controls]="ariaControls"
  [attr.aria-expanded]="ariaExpanded"
  [attr.aria-label]="
    ariaLabel ||
    ((contentInfoObs | async)?.descriptor?.type === 'text'
      ? ('skyux_filter_aria_label_descriptor'
        | skyLibResources: (contentInfoObs | async)?.descriptor?.value)
      : ('skyux_filter_button_title' | skyLibResources))
  "
  [attr.title]="'skyux_filter_button_title' | skyLibResources"
  [disabled]="disabled"
  [id]="filterButtonId"
  [ngClass]="{
    'sky-filter-btn-active': active
  }"
  (click)="filterButtonOnClick()"
>
  <sky-icon *skyThemeIf="'default'" icon="filter" size="lg" />
  <sky-icon *skyThemeIf="'modern'" icon="filter" />
  @if (showButtonText) {
    <span class="sky-filter-btn-text">
      {{ 'skyux_filter_button_title' | skyLibResources }}
    </span>
  }
</button>
