Changing the css class of Button on Alert

Ionic Framework ionic-v3
1

Hi I’m really struggling to change the color of the buttons in a alert. I don’t want to change the default since the alert shoud have three different color buttons. For starters I just want to change one button’s color to red.

.ts file:
`let alert = this.alertCtrl.create({

  title : title,
  message : text,
  inputs: [
    {
      name: 'pin',
      placeholder: 'Pin'

    }
  ],
  buttons: [{
    cssClass: 'buttoncss',
    text: 'btnType',
  }]
});

alert.present();`

.scss file:

`let alert = this.alertCtrl.create({

  title : title,
  message : text,
  inputs: [
    {
      name: 'pin',
      placeholder: 'Pin'

    }
  ],
  buttons: [{
    cssClass: 'buttoncss',
    text: 'btnType',
  }]
});

alert.present();`

Thanks

2

This is old but this can help someone.

You can add specific classes in alert button using cssClass as mentioned in Ionic AlertController -

const alert = this.alertCtrl.create({
  title: 'Alert title',
  subTitle: 'Alert body content.',
  buttons: [
    { text: 'Later', handler: data => { }, cssClass: 'failure-button' },
    { text: 'Submit', handler: data => { }, cssClass: 'success-button' },
  ]
});
1 Like