Style is not applied to ion-button

<ion-button shape="round" fill="outline">Outline + Round</ion-button>

This button is displayed as just white text. It doesn’t even look like a button. This is how the Ionic 4 documentation says things should work. However, the existing code works fine:

<button ion-button shape="round" fill="outline" class="card-button" (click)="onCancelClicked()" align="right">Cancel</button>

I reproduced this in stackblitz.

The package json says:

"@ionic-native/core": "4.3.0",
"@ionic/app-scripts": "3.0.0",

So why does the app not work? I inherited this app from another developer. So it’s possible they were on Ionic 3 or older at some point…I have no idea. What can I check?

Ionic:

ionic (Ionic CLI) : 4.10.3 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.7.1
@ionic/app-scripts : 3.0.0

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : ios 4.5.5
Cordova Plugins : cordova-plugin-ionic 1.1.9, (and 9 other plugins)

System:

ios-deploy : 1.9.4
NodeJS : v8.15.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61

it’s a ionic V3 app
look this docs

1 Like