Search code examples
cssionic4

styling on ion-button with disabled not working in ionic V4

I am using ionic v4, and I have to gave a different color when button is disabled as we normally do. But whatever I applied didn't show any effect. As ion button does not have any background-disable property as it has for hover, focus and active. https://ionicframework.com/docs/api/button#css-custom-properties

Here is my code:

 <ion-button type="submit" color="danger" disabled="true">Next</ion-button>

I have tried the following things:

css in variable.scss (approach 1)
---------------------------------
:host(.button-disabled) .button-native{
  background: blue;
  color: white;
}

css in my custom file (approach 2)
----------------------------------
ion-button[color='danger'].button.button-disabled{
  background: blue !important;
  --background: blue !important;
  --opacity: 1;
}
Solution

  • You could set the color conditionally in the html depending on the disabled value:

    <ion-button type="submit" [color]="isDisabled? 'danger':'primary'" [disabled]="isDisabled">Next</ion-button>