Skip to content

MudIconButton: Keep padding consistent between variants - #13563

Merged
danielchalmers merged 1 commit into
MudBlazor:devfrom
Guflly:fix/icon-button-padding
Aug 2, 2026
Merged

MudIconButton: Keep padding consistent between variants#13563
danielchalmers merged 1 commit into
MudBlazor:devfrom
Guflly:fix/icon-button-padding

Conversation

@Guflly

@Guflly Guflly commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

Keeps filled icon buttons aligned with outlined icon buttons by reserving the border space instead of changing the padding. The outer button size stays unchanged.

Fixes #10366

Tested in the UnitTests Viewer at 125% display scaling. The Viewer build passes with 0 warnings and 0 errors.

125% display scaling

Outlined and filled icon buttons at 125% display scaling

Checklist:

  • I've read the contribution guidelines
  • My code follows the style of this project
  • This CSS-only change was checked in the test viewer

@mudbot mudbot Bot added the bug Unexpected behavior or functionality not working as intended label Jul 31, 2026
@Guflly
Guflly force-pushed the fix/icon-button-padding branch from 62e4e68 to 70c268f Compare July 31, 2026 12:53

@danielchalmers danielchalmers left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At 100%/200% scaling it's the same, but it fixes it at 125%/150%/175%. Chromium floors the 1px border to a whole device pixel while padding keeps its exact value, so dev renders filled 0.4/0.67/0.86px wider than outlined; this patch brings the delta to exactly 0, icon inset included.

Image

Note for later: the reserved border is additive wherever padding is overridden at higher specificity, so filled icon buttons grow 2px under a consumer Class="pa-0" / Style="padding:0" and in a MudButtonGroup with OverrideStyles="false".

@danielchalmers

Copy link
Copy Markdown
Member

Could you replace the before/after with one screenshot of an outlined and a filled icon button next to each other, taken on a 125%-scaled display? They don't seem to show the defect.

@Guflly

Guflly commented Jul 31, 2026

Copy link
Copy Markdown
Contributor Author

Updated with one 125%-scale comparison.

@danielchalmers
danielchalmers merged commit 8c91774 into MudBlazor:dev Aug 2, 2026
10 checks passed
@danielchalmers

Copy link
Copy Markdown
Member

Thank you!

This was referenced Aug 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Unexpected behavior or functionality not working as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

MudIconButton: Padding changes 1px when changing from Outlined to Filled

2 participants