Change toast "close" button and text css

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


you can use


in css file

.yourcssclass { }

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


.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

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: {
        // my regular css code

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