diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html
index e8769dfbc01..b3172f10dcf 100644
--- a/core/src/components/toast/test/basic/index.html
+++ b/core/src/components/toast/test/basic/index.html
@@ -63,10 +63,14 @@
         Translucent Toast
       </ion-button>
 
-      <ion-button expand="block" id="color-toast" onclick="openToast({message: 'click to close', buttons: ['Close'], color: 'danger'})">
+      <ion-button expand="block" id="color-toast" onclick="openToast({message: 'click to close', buttons: [{text: 'Close'}, {icon: 'close', role: 'cancel'}], color: 'danger'})">
         Color Toast
       </ion-button>
 
+      <ion-button expand="block" id="light-color-toast" onclick="openToast({message: 'click to close', buttons: [{text: 'Close'}, {icon: 'close', role: 'cancel'}], color: 'light'})">
+        Light Color Toast
+      </ion-button>
+
       <ion-button expand="block" id="custom-class-toast" onclick="openToast({message: 'click to close', buttons: ['Close'], cssClass: 'my-custom-class'})">
         Custom Class
       </ion-button>
diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss
index 5eb91014f57..70078393695 100644
--- a/core/src/components/toast/toast.scss
+++ b/core/src/components/toast/toast.scss
@@ -65,6 +65,10 @@
   color: #{current-color(contrast)};
 }
 
+:host(.ion-color) .toast-button-cancel {
+  color: inherit;
+}
+
 :host(.ion-color) .toast-wrapper {
   background: #{current-color(base)};
 }