Skip to content

[button ]v9.0.1 breaks layout with custom CSS gap #48539

@ZebraFlesh

Description

@ZebraFlesh

Steps to reproduce

Steps:

  1. Create a Button with a startIcon and a gap: 20px style
  2. Upgrade to 9.0.1
  3. Observe that layout has been broken

Example:

<Button startIcon={<AddBoxIcon />}
  sx={{
     border: '1px solid red',
     gap: '20px',
   }}
>
  My Button
</Button>

Current behavior

9.0.1: https://stackblitz.com/edit/github-5wywe1mb-abkffyvk?file=src%2FApp.tsx

Expected behavior

9.0.0: https://stackblitz.com/edit/github-5wywe1mb-o1rdasp8?file=src%2FApp.tsx

Context

PR #48332 fixes a bug in the Button component by introducing a ::before pseudo element that supplies a content: '\200b' attribute (non-breaking space). This additional content breaks existing layouts. I expect a patch version upgrade to not break my layouts.

This happens across latest Chrome, Chrome Canary, Safari, and Firefox.

Your environment

npx @mui/envinfo
 System:
    OS: Linux 5.0 undefined
  Binaries:
    Node: 22.22.0 - /usr/local/bin/node
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: latest => 11.14.0 
    @emotion/styled: latest => 11.14.1 
    @mui/core-downloads-tracker:  9.0.1 
    @mui/icons-material: 9.0.1 => 9.0.1 
    @mui/material: 9.0.1 => 9.0.1 
    @mui/private-theming:  9.0.1 
    @mui/styled-engine:  9.0.0 
    @mui/system:  9.0.1 
    @mui/types:  9.0.0 
    @mui/utils:  9.0.1 
    @types/react: latest => 19.2.14 
    react: latest => 19.2.6 
    react-dom: latest => 19.2.6 
    typescript: latest => 6.0.3 

Search keywords: 9.0.1 button

Metadata

Metadata

Assignees

Labels

has workaroundThere’s a bug, but users have a complete workaround, so no urgent fix or release is needed.scope: buttonChanges related to the button.type: regressionA bug, but worse, it used to behave as expected.
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions