<div >
      <ion-button size='small' [fill]="tabSelected == 'details'? 'solid' : ''" (click)='selectTab("details")'>
        <ion-icon size='small' name="information-circle-outline"></ion-icon>
      </ion-button>

      <ion-button size='small' [fill]="tabSelected == 'customer' ? 'solid' : ''" (click)='selectTab("customer")'>
        <ion-icon size='small' name="person-circle"></ion-icon>
      </ion-button>

      <ion-button size='small' [fill]="tabSelected == 'colleagues' ? 'solid' :''" (click)='selectTab("colleagues")'>
        <ion-icon size='small' name="people-outline"></ion-icon>
      </ion-button>
    </div>

When pressing a button i'd like to set the fill color of the of the button. In this case I set the tabSelected on a certain value, and then based on that make the fill "solid" or not.

I'd like to manage all colors from outside of the html, and thus set it through css.

ion-button {
  --color: var(--ion-color-pmblue-contrast);
  --background: var(--ion-color-pmblue);
}

This sets the background of the button to the blue, but in this case I only want to have the active one have this state. Ive thought about adding a class with ngclass, instead for the fill, is that the way to go in this case?

Happening:

Preffered: (this is with color set on the html as attribute color='pmblue') color on ion-button in css points to the text-color.

CodePudding user response：

Correct me if I'm wrong but doesn't ionc icon and button have color property?

E.g you could do:

 <ion-button size='small' [fill]="tabSelected == 'details'? 'solid' : ''" (click)='selectTab("details")' [color]="tabSelected == 'colleagues'? 'pmblue' : ''" }">