Change toast "close" button and text css

Ionic Framework ionic-v3
1

Hello, how can I change the text inside a toast and the close button’s style?

Thanks!

2

hello,
you can use

cssClass:'yourcssclass'

in css file

.yourcssclass { }
3

I know about that, but I don’t what tag or id class to use to override the close button text or the toast’s text

4

try

.yourcssclass .toast-button-inner{ color: yourcolor; }

for button
when i want to play with css
I right click on the item and inspection, it gives me the different id that I need :wink:

1 Like
5

the solution which worked for me was:

        let toast = this.toastCtrl.create({
          message: 'your toast message text',
          duration: 3000,
          cssClass: 'toast-error',
          showCloseButton: true,
          closeButtonText: 'Undo'
        });

and in my css file:

page-my.page.scss.name {
        // my regular css code
}

.toast-error .button-inner {
    color: color($colors, danger);
}
1 Like