bug(Button): Button hover/clickable outside border & missing token

[SocDario]

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

When a override is added to a button, the button remains clickable and can be hovered outside the border. I found a token to override this behavior, but I can't get it to work. Additionally, I suggest improving the documentation by specifying the types of values accepted for the token.

@include mat.button-overrides((
    filled-touch-target-display: none
))

Screen.Recording.2025-03-02.at.12.12.46.mov

Also there is no option to change outline color of outlined button when hovered/focused/pressed, only for disabled state? According to m3 design it should be possible:
https://m3.material.io/components/buttons/specs#4a0c06da-0b2f-47de-a583-97e0ae80b5a5

Reproduction

StackBlitz link: https://stackblitz.com/edit/q9bg7z8v?file=src%2Fexample%2Fbutton-overview-example-override.scss
Steps to reproduce:

1. Try to move cursor close to the button border

Expected Behavior

Button should not be clickable or able to hover outside button border

Actual Behavior

Button is clickable and can be focused outside border

Environment

• Angular: 19
• CDK/Material: 19.2.1
• Browser(s): Chrome, Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[Akma786]

Is this still Open!
if it is open then i am on it!

[crisbeto]

Looks like it's due to the focus indicators. This has some implications in our internal setup so we should be careful with how we handle it. That being said, you can work around it in your own setup by setting .mat-focus-indicator { display: none; }.

[SocDario]

@crisbeto
Thank you for your response. I will review the workaround and test it later today.

I also wanted to follow up on the second part of my request. While not necessarily an issue, I noticed in the source code that the hover and focus outline colors for outlined buttons were not supported in the Material 2 (M2) version. However, with Material 3 (M3), it appears that these styles should be customizable. Could you confirm if this is the case?

Specifically, I am referring to the following design tokens:

hover-label-text-color
focus-label-text-color
pressed-label-text-color
hover-outline-color
focus-outline-color
pressed-outline-color

I appreciate your insights and look forward to your response.

[crisbeto]

It looks like those tokens were in the spec, but we never implemented them, I suspect because they looked identical to the base color.

[SocDario]

@crisbeto
It looks like those tokens inherit the same base color as the outlined-outline-colortoken (md.sys.color.outline) and outlined-label-text-color token (md.sys.color.primary). However, they can be used to modify the outline and text colors for the respective pseudo-classes.

I'll take a deeper dive into the codebase to explore a possible implementation. If no one from the team addresses it in the meantime, I’ll work on a solution and submit a PR.

Also a workaround would be:

&:hover,
&:focus {
  @include mat.button-overrides((
    outlined-outline-color: #475A66,
    outlined-label-text-color: #082234
  ));
}