ionic-framework

How do you change the disabled color of an Ionic fab? Ionic 8


For this simple ionic fab element:

  <ion-fab slot="fixed" vertical="bottom" horizontal="start">
    <ion-fab-button [disabled]="disabled">
      <ion-icon size="large" src="monkey-assets/icons/ui-icons/plus.svg"></ion-icon>
    </ion-fab-button>
  </ion-fab>

the following style code does not work, and I can't understand why???

ion-fab-button {
  &[disabled] {
    --ion-color-base: var(--light-gray) !important;
    --background: blue  !important;
    --color: green  !important;
    --opacity: 0.2;
  }
}

For comparison, this test does work:

ion-fab-button {
  --background: blue;
  --color: green;
}

and also, with disabled true, the result is a greyed out button. So that property is getting applied.

It seems like it's not possible to target a [disabled] fab as easily as I thought it would???

NB: Proposed solutions here: Ionic change font color of disabled button do not appear to work in this case.


Solution

  • Below CSS works Use Part

    ion-fab-button.fab-button-disabled::part(native)
    {
        background: yellow;
    }