bug(button): mat-mdc-button-touch-target height and width are hard coded to 48px

[sdedieu]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Version 19 allows to redefine the button height using the filled-container-height, outlined-container-height and protected-container-height.

However the inner mat-mdc-button-touch-target width and height are hard coded to 48px. Which means, if we define a small button, touch area will overflow.

This behavior is present in the documentation example, where the two button-icons have a width and height of 40px but a touch target of 48px.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-adbmj5bj?description=An%20angular-cli%20project%20based%20on%20@angular/animations,%20@angular/common,%20@angular/compiler,%20@angular/core,%20@angular/forms,%20@angular/platform-browser,%20@angular/platform-browser-dynamic,%20@angular/router,%20core-js,%20rxjs,%20tslib%20and%20zone.js&file=package.json,src%2Findex.html,src%2Fglobal_styles.scss,src%2Fmain.ts,angular.json&template=node&title=Angular%20Starter Steps to reproduce:

1. Open the link
2. Click bellow the button

Expected Behavior

touch target height and width should be computed from the --mdc-filled-button-container-height variable.

Actual Behavior

Clicking outside of the button trigger the event.

Environment

Angular CLI: 19.2.0 Node: 20.19.1 Package Manager: npm 10.8.2 OS: linux x64

Package Version

@angular-devkit/architect 0.1902.0 @angular-devkit/core 19.2.0 @angular-devkit/schematics 19.2.0 @angular/cdk 19.2.17 @angular/material 19.2.17 @schematics/angular 19.2.0 rxjs 7.8.1 typescript 5.8.2 zone.js 0.15.0

[json-derulo]

For better accessibility, Material Design recommends touch targets of 48px regardless of how big the element is. It may also extend the bounds of the element. See the related documentation.

[sdedieu]

Oh hmmm ok that make sense on a Material perspective. I thought this new API allowed to build custom design systems on top of Angular Material. But I guess to do so there is still ugly CSS class overriding to perform.

[crisbeto]

I think it's still worth providing a token to customize the size of the touch target. We should do it for all components that have touch targets though.

[XLeapJak]

If I'm not mistaken this issue affects not only custom button sizes or densities but standard buttons with a default height of 40px. See issues 27118

My workaround is applying calculated margins to reserve the space for the overflown regions per default or if needed. For a raised button something like:

--my-button-protected-vertical-spacing: calc(.5 * math.max(0, (48px - var(--mat-button-protected-container-height)))); 
.mat-mdc-button-raised.greedy { margin: var(--my-button-protected-vertical-spacing, 0) initial; }

This prevents unexpected scrolling and also possible overlap of touch targets. Having a token for the touch target size would help to do that more consistently.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}