Skip to content

bug(Stroked Button): white space between the opacity layer and the outline using the outlined-container-shape token #30484

Closed
@izubiaCocha

Description

@izubiaCocha

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

I'm currently using a button-override with an outlined-container-shape set to 8px. It appears that the border-radius of the outline is smaller than that of the state's opacity layer. This is causing a white space to appear in the corners of the button, between the outline and the opacity layer.

Image

Reproduction

StackBlitz link: I'm having trouble with the "Installing dependencies" step
Steps to reproduce:

  1. angular cli 19.0.7
  2. ng new any-name
  3. ng add @angular/material (blue theme, sass)
  4. Add some mat-stroked-button
  5. html { @include mat.button-overrides((outlined-container-shape: 8px)); }

Expected Behavior

The opacity layer should fully cover the hole within the outline, in the hover, active and pressed states.

Actual Behavior

the opacity layer is smaller, leaving visible white gaps.

Environment

  • Angular: 19.0.6
  • CDK/Material: 19.0.5
  • Browser(s): chrome /safari
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/button

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions