Ionic button text color

<ion-button class="next-btn" color="secondary" shape="round" expand="block" >

    --color: var(--ion-color-light);

this is my HTML and CSS. color of the button text is not changing, when I give color property to the button. but if I remove the color property the text color will change.

why is that not working when i give color property for the button?

It’s because you are using the color property too which overrides the custom CSS. If you want to use both, you can do the following:

.next-btn::part(native) {
    --ion-color-contrast: var(--ion-color-light);

@twestrick thanks for the solution

1 Like