[material-ui][button] Text not vertically centered

[sensasi-delight]

Steps to reproduce

Link to live example:
https://mui.com/material-ui/react-button/#buttons-with-icons-and-label

Current behavior

button text is not centered when has a leading/trailing icon

Expected behavior

button text should be vertically centered like v5

Context

No response

Your environment

npx @mui/envinfo

System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.9.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: 128.0.6613.113
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/core-downloads-tracker:  6.0.1 
    @mui/icons-material: ^6.0.1 => 6.0.1 
    @mui/material: ^6.0.1 => 6.0.1 
    @mui/private-theming:  6.0.1 
    @mui/styled-engine:  6.0.1 
    @mui/system:  6.0.1
    @mui/types:  7.2.16
    @mui/utils:  6.0.1
    @types/react: ^18 => 18.3.5
    react: ^18 => 18.3.1
    react-dom: ^18 => 18.3.1
    typescript: ^5 => 5.5.4

Search keywords: button

[mnajdova]

Hmm, looks good to me when I open the production build

Is this happening while zooming? Or anything else specific you can share? If you export to CodeSandbox, do you see the same result?

[sensasi-delight]

Thank you for your response.

To provide more context, I recently started a new project and decided to use MUI v6. While developing the first page, I noticed something off with the <Button /> component (at normal zoom)—it didn't look quite right to me. So, I zoomed in to ensure that the button text was centered, and I found that it was indeed not centered. I then compared this to MUI v5, as well as an older project of mine that also uses v5, and none of the buttons exhibited this behavior like they do in v6.

I've created a CodeSandbox to demonstrate this issue, and I observed the same result:
https://codesandbox.io/p/sandbox/tender-currying-n68526

I mentioned this to a friend, and when he checked on his laptop (MacOS), the button appeared centered, but it remains uncentered on my laptop (Windows 11).

Button on my recent project:

Button on CodeSanbox:

[DiegoAndai]

Hey @sensasi-delight, thanks for the report!

I can confirm this behavior on Windows, although I also see it on the latest v5: https://codesandbox.io/p/sandbox/43545-mui-v5-button-preview-8gs5ch?workspaceId=836800c1-9711-491c-a89b-3ac24cbd8cd8. Can you confirm that this sandbox using v5 also shows the issue on your machine?

What exact v5 version were you using before migrating to v6?

[sensasi-delight]

Thank you for the response,

I'm losing my grip on reality right now. The button texts in all versions appear slightly centered, but still not as perfectly as in v5, which I shared earlier. Additionally, the startIcon in v6, as shown in the documentation, seems slightly lower now.

mui version in my previous project is shown below:

System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.9.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3
    @emotion/styled: ^11.13.0 => 11.13.0
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.16.7
    @mui/icons-material: ^5.16.7 => 5.16.7
    @mui/lab: ^5.0.0-alpha.173 => 5.0.0-alpha.173
    @mui/material: ^5.16.7 => 5.16.7
    @mui/private-theming:  5.16.6
    @mui/styled-engine:  5.16.6
    @mui/system:  5.16.7
    @mui/types:  7.2.15
    @mui/utils:  5.16.6
    @mui/x-date-pickers: ^6.20.2 => 6.20.2
    @types/react: ^18.3.5 => 18.3.5
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript: ^5.5.4 => 5.5.4

[DiegoAndai]

Here I'm changing back and forth between v5 and v6, confirming there's no difference between versions on my end at least:

Screen.Recording.2024-09-05.at.15.01.12.mov

That being said, it looks uncentered, so it is a bug (although not a v6-specific one). This issue has been here for a while, and looks like it's the same as: #19584. I'll reopen the original one and add the ready-to-take label.

I'm closing this one as a duplicate of #19584, but let me know if you disagree and think it's different.

@sensasi-delight In the meantime, I can help you with a workaround. Just share your project or a repro similar to it with me on a comment here.

[sensasi-delight]

Thank you for your response and for offering to help with a workaround. I really appreciate it! However, I’ll be working to resolve the issue on my own for now. Thanks again for reopening the original ticket and for your assistance. Godspeed to you and the entire team!