Can we customize ionic toast close button.?

Question

I am trying to add background color for ionic toast button but couldn't succeed. I tried below css in global.scss. Could someone tell me how can I achieve this.?

  .positive-toast-message {
       --min-width: 60%;
       --background: #bde7c3;
       --color: black;
       --button-color: black;
       .toast-button {
        --background: red !important;
        background: white !important;
        background-color: blue !important;
       }
   }

Once Toast is created, it is applying 'positive-toast-message' css properly

Answer 1

If you want to do that, then you should use css class. Call the toast like this

const toast = await this.toastCtrl.create({
    message: 'Please Fill all fields',
    duration: 30000,
    position: 'top',
    cssClass: 'toast-bg'
  });

  toast.present();

Then go to global.scss file and put this class there

.toast-bg {
  --background: blue;
  --button-color: #ffffff;
}

This should work. change the color to whatever color you want within the css class in global.scss

Answer 2

On IONIC 5 you can simply use CSS shadow and toast part to apply your customization.

for example, in order to change the button's color you can simply use the below code:

ion-toast::part(button) {
  --button-color: var(--ion-color-tertiary) !important;
  --color: var(--ion-color-tertiary) !important;
}