ionic-team / ionic-team/ionic-framework

bug: --button-color does not modify cancel button color in toasts

Open
#21,818 2 comments 5 reactions 0 assignees View on GitHub
package: core type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

# Bug Report

**Ionic version:**

[ ] **4.x**
[x] **5.x**

**Current behavior:**

Toast [custom css property](https://ionicframework.com/docs/api/toast#css-custom-properties) `--button-color` does not affect cancel button.

**Expected behavior:**

Affecting a color through `--button-color` should modify the color of all buttons present in the toast

**Steps to reproduce:**

1. start a template
2. add a toast
3. add a `--button-color` property in app.scss

**Related code:**

app.component.ts

```ts
const toast = await this.toastCtrl.create({
header: 'Toast header',
message: 'Click to Close',
position: 'top',
buttons: [
{
side: 'start',
icon: 'star',
text: 'Favorite',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Done',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
toast.present();
```

app.scss

```scss
ion-toast {
--background: red;
--button-color: red;
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.