CODEWITHSUNDEEP
cssangulartypescriptionic2ionic3
Dak
Dak

Reputation: 312

How to change the color of buttons in Alert in Ionic2

Is it possible to change the color of buttons of Alert (Ok, Cancel) in Ionic2? Can we use cssClass property to give color to buttons?

.buttonCss{
    button{
        color:#e74c3c !important;
    }
}

The above code gives the same color to the both Ok and Cancel buttons like the below image enter image description here

But I need to get the following result(Both button shoulb in in different color), enter image description here

Any help is appreciated...!

Edit 1: Added showAlert() function

    showAlert(title, message, yesHandler, noHandler, caller) {
    let alert = this.alertCtrl.create({
        title: title || "Please Confirm",
        message: message,
        cssClass:'buttonCss',
        buttons: [
            {
                text: 'Exit',
                handler: () => yesHandler(caller)
            },
            {
                text: 'Cancel',
                role: 'cancel',
                handler: () => noHandler(caller)
            }
        ]
    });
    alert.present();
}

Upvotes: 7

Views: 10299

Answers (3)

sebaferreras
sebaferreras

Reputation: 44659

1) First option, just using a class for the alert, and a css style rule for each button

showAlert(title, message, yesHandler, noHandler, caller) {
    let alert = this.alertCtrl.create({
        title: title || "Please Confirm",
        message: message,
        cssClass:'buttonCss',
        buttons: [
            {
                text: 'Exit',
                handler: () => yesHandler(caller)
            },
            {
                text: 'Cancel',
                role: 'cancel',
                handler: () => noHandler(caller)
            }
        ]
    });
    alert.present();
}

And then:

.buttonCss {

    button.alert-button:nth-child(1){
      color: red;
    }

    button.alert-button:nth-child(2){
      color: green;
    }
}

This way the first button (nth-child(1)) will be red and the second button (nth-child(2)) will be green.

2) Second option, using a class for the alert, and adding the cssClass property to each button, in order to use that custom class on each button

showAlert(title, message, yesHandler, noHandler, caller) {
    let alert = this.alertCtrl.create({
        title: title || "Please Confirm",
        message: message,
        cssClass:'buttonCss',
        buttons: [
            {
                text: 'Exit',
                cssClass: 'exit-button',
                handler: () => yesHandler(caller)
            },
            {
                text: 'Cancel',
                role: 'cancel',
                cssClass: 'cancel-button',
                handler: () => noHandler(caller)
            }
        ]
    });
    alert.present();
}

And then:

.buttonCss {

    button.alert-button.exit-button{
      color: red;
    }

    button.alert-button.cancel-button{
      color: green;
    }
}

Upvotes: 20

Santhoshkumar
Santhoshkumar

Reputation: 780

you have options to add custom class for button using cssClass

showAlert(title, message, yesHandler, noHandler, caller) {
let alert = this.alertCtrl.create({
    title: title || "Please Confirm",
    message: message,
    cssClass:'buttonCss',
    buttons: [
        {
            text: 'Exit',
            handler: () => yesHandler(caller)
        },
        {
            text: 'Cancel',
            cssClass: 'customClass',
            role: 'cancel',
            handler: () => noHandler(caller)
        }
    ]
});
alert.present();

}

In Css:

.customClass{
  color:#e74c3c !important;
 }

Upvotes: 0

nerdychick
nerdychick

Reputation: 415

You need to give each button a class, then when assigning a class to each button, you can change the colour of each individual button. Also you can add hover effects to change the colour on hover as well.

Upvotes: 0

Related Questions