Button text is not vertically aligned

[adipascu]

I feel like the buttons in material ui v3.6.2 do not have the text vertically aligned while rendering on Chrome 70.

I think that that they looked fine in material-ui v0.x but in the recent material-ui versions they are a bit taller and have a "chin" under the text.

Here are some screenshots from the docs:

v0.x	v3.6.2
DOM link	DOM link

[oliviertassinari]

@adipascu Yes, you are right, the height of the button component is wrong 😱:

It should be 36px over 37px. I propose the following fix:

export const styles = theme => ({
  /* Styles applied to the root element. */
  root: {
    ...theme.typography.button,
    boxSizing: 'border-box',
    minWidth: 64,
    minHeight: 36,
-   padding: '8px 16px',
+   padding: '6px 16px',

https://github.com/mui-org/material-ui/blob/dc396ad3d13224412105e86be43ddb607f8a543d/packages/material-ui/src/Button/Button.js#L20

What do you think about it? Do you want to work on it? :)

[adipascu]

My first comment had screenshots at 200% zoom, the issue is more accentuated at normal 100% zoom, this might be also a Chrome renderer issue.

@oliviertassinari woah, that fixes it for me, I posted a PR.

[sandro768]

I've got the same issue. in material UI ^4.9.12 version
Duplicate of #13926 #

[ethoman]

Likewise, the padding is still messed up - on chrome it is centered, on safari the padding is wrong and the button text is not centered - this issue only occurs if you specify button height in styles

[oliviertassinari]

@ethoman One of the issues with vertical alignment of the text in a button is that different fonts have different centering.
For instance, in https://seek-oss.github.io/capsize/ you can see that Inter is better centered than Roboto.

[ericettensohn]

This is a weird one - I see this issue at 100% zoom in chrome, but as soon as I zoom in further, it disappears and the text is vertically centered again. I opened screenshots up in Photoshop to double check, and sure enough the 100% zoom level button has 1-2 more pixels of space below the text than it does above.

[CyanoFresh]

have this problem on mui 5.6

[dkurucz]

Also seeing this problem on MUI 5.6.2. This issue is made especially obvious when a start or end icon is added alongside the text using the Button properties. If it helps, I was able to solve this specific outlying issue by wrapping the button text in a Box and setting the height of the Box to the height of the properly sized icon, and that allowed everything to line up, but this is far from an ideal solution.

[n-ii-ma]

I'm also experiencing this issue on MUI 5.6.4.

[malikarami]

I am experiencing this issue too(with the IconButton). The Mui version is 5.8.2
As you can see the SVG icon is centered but the text is not. I have tried setting flex alignment and justification attributes, but they did not help.

<IconButton size="large"> <AddIcon /> button text </IconButton>