feat(button): add support for filled tonal button same as in M3 spec

[eneajaho]

Feature Description

https://m3.material.io/components/buttons/guidelines#07a1577b-aaf5-4824-a698-03526421058b

Use Case

No response

[bradleybeighton]

+1

[vulture9]

upvoted missing core feature should be implemented.

[MariusMoeOlsen]

Yes, I also need this.

[nasser-alkhateeb]

+1. This feature should be implemented. In the meantime, we can use the following:

button.mat-tonal-button {
  background-color: var(--sys-secondary-container);
  color: var(--mat-app-on-secondary-container);
}

<button class="mat-tonal-button" mat-button>
</button>

[JWess]

+1. This feature should be implemented. In the meantime, we can use the following:

button.mat-tonal-button {
  background-color: var(--sys-secondary-container);
  color: var(--mat-app-on-secondary-container);
}

<button class="mat-tonal-button" mat-button>
</button>

In v19, I had to use these slightly differently named CSS vars: --mat-sys-secondary-container --mat-sys-on-secondary-container

[JWess]

It's nearly impossible to follow the M3 spec without having access to a tonal button. This seems like a major issue.

[JWess]

This is the best workaround I found for now. It piggybacks on the extended fab button, so you're still inside the theme and get appropriate styling for hover/focus/press and probably other things I've not thought of.

<button class="tonal"
  mat-fab extended
>
  Button Text
</button>

.tonal.mat-mdc-extended-fab {
  @include mat.fab-overrides((
    extended-container-height: 40px,
    extended-container-shape: var(--mat-sys-corner-full),
    extended-container-elevation-shadow: var(--mat-sys-level0),
    extended-focus-container-elevation-shadow: var(--mat-sys-level0),
    extended-hover-container-elevation-shadow: var(--mat-sys-level0),
    extended-pressed-container-elevation-shadow: var(--mat-sys-level0),
  ));
}