<button
  #button
  class="twnd-button-toggle-button twnd-focus-indicator border-b-4 {{checked ? 'border-b-purple-500 bg-gray-100 dark:bg-gray-800 bg-opacity-50' : 'border-b-transparent bg-gray-300 dark:bg-gray-600 bg-opacity-100'}}"
  type="button"
  [id]="buttonId"
  [attr.tabindex]="disabled ? -1 : tabIndex"
  [attr.aria-pressed]="checked"
  [disabled]="disabled || null"
  [attr.name]="name || null"
  [attr.aria-label]="ariaLabel"
  [attr.aria-labelledby]="ariaLabelledby"
  (click)="_onButtonClick()">
  <span class="twnd-button-toggle-label-content">
    <ng-content></ng-content>
  </span>
</button>