[Button] Text wrap issue

[oliviertassinari]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. https://codesandbox.io/s/inspiring-browser-c7qmv7?file=/Demo.tsx

Current behavior 😯

Expected behavior 🤔

Context 🔦

It looks more correct on Material UI:

https://codesandbox.io/s/peaceful-khorana-27gct9

but a lower line-height would I think feel better.

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[sofiyanpathan]

Hi ,can I work on this if it is open?

[siriwatknp]

Hi ,can I work on this if it is open?

Thanks for asking! The PR is already there, would you mind taking a look at other issues?

[oliviertassinari]

I checked on Material UI v6, it looks ok: https://mui.com/material-ui/react-button/#material-you-version

cc @DiegoAndai. I wouldn't mind -1px on padding-top and padding-bottom though:

---

Actually, should we rename "Material You version" to something like "Material UI v6 (alpha)"?

[Praveen03AJJARAPU]

Is this issue still open, so that I can work on this.

[akshayw1]

Hey,Is this issue still open, so that I can work on this.

[DiegoAndai]

@Praveen03AJJARAPU @akshayw1 Thanks for asking, the Joy PR is already up. On the Material line height, we should define it before working on it.

but a lower line-height would I think feel better.

@oliviertassinari @zanivan, what should we use for the line height? Would we change it for buttons with text wrapping only?

Regarding v6 (https://github.com/mui/material-ui/issues/38675#issuecomment-1724503276)

• I split the Material UI docs feedback into a separate issue: https://github.com/mui/material-ui/issues/39266
• The padding follows the specs, so I would only decrease 1px if we had a really good reason. What do you think, @zanivan?

[oliviertassinari]

what should we use for the line height?

@DiegoAndai I'm not familiar with the implementation, to consider the impact on the design tokens. Maybe it's not worth it. In v5, If I recall the code correctly, this isn't a concern.

At the end of the day, I think the UX should win over other considerations, like following exactly the design token structure. I mean, we should aim to make the same tradeoffs designers & engineers would want to make.

Would we change it for buttons with text wrapping only?

I don't think developers or the code can know if a button wraps. In most cases, it's not supposed to (this issue is about minimizing the worst case scenario when a button needs to wrap to fit in the layout).

[hetpatel4381]

Hello is the issue still open can i pull and solve it ?

[ShaikhHeeba07]

Hello, I'd like to inquire if the issue is still available for me to pull and work on?

[zanivan]

Hey, @ShaikhHeeba07 @hetpatel4381 thanks for asking! We already have two undergoing PRs for the Joy UI line height on buttons, the #38696 and #39316 :)

[Riyanshi26]

Hello! Is the issue still open? If yes, can I work on it?

[ArchitGajjar]

Hi @oliviertassinari - can you please assign this issue to me ?

[anuragsingh6886]

Hello, I'd like to know if this issue is still persist for me to pull and work on?

[sreeragdas]

hi , can i work on this

[geekngoyal]

Hi, let me know if I can start working on it. Looking to start my open source journey. Thanks

[siriwatknp]

@zanivan What should be the line-height for Material UI Button?

[zanivan]

@zanivan What should be the line-height for Material UI Button?

On Material Design 2 the line-height is 1.5. Material Design 3 uses 1.25. Currently, if I'm not mistaken, we're using 1.75 on buttons. So, making it 1.5 would suit the MD2 guidelines and make spacing more consistent with padding, e.g.:

1.75	1.5

[siriwatknp]

For anyone who is interested to submit a PR, here is the fix:

diff --git a/packages/mui-material/src/styles/createTypography.js b/packages/mui-material/src/styles/createTypography.js
index 277808d2a7..32b5e9f790 100644
--- a/packages/mui-material/src/styles/createTypography.js
+++ b/packages/mui-material/src/styles/createTypography.js
@@ -69,7 +69,7 @@ export default function createTypography(palette, typography) {
     subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
     body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
     body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
-    button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
+    button: buildVariant(fontWeightMedium, 14, 1.5, 0.4, caseAllCaps),
     caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
     overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),
     // TODO v6: Remove handling of 'inherit' variant from the theme as it is already handled in Material UI's Typography component. Also, remember to remove the associated types.

[successbyte]

For anyone who is interested to submit a PR, here is the fix:

diff --git a/packages/mui-material/src/styles/createTypography.js b/packages/mui-material/src/styles/createTypography.js
index 277808d2a7..32b5e9f790 100644
--- a/packages/mui-material/src/styles/createTypography.js
+++ b/packages/mui-material/src/styles/createTypography.js
@@ -69,7 +69,7 @@ export default function createTypography(palette, typography) {
     subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
     body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
     body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
-    button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
+    button: buildVariant(fontWeightMedium, 14, 1.5, 0.4, caseAllCaps),
     caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
     overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),
     // TODO v6: Remove handling of 'inherit' variant from the theme as it is already handled in Material UI's Typography component. Also, remember to remove the associated types.

Hi, I am interested to Contribute with MUI and it would be an start point if this issue is not assigned to anyone Can I work on it?

[successbyte]

Hello everyone can you guide me how to pass the checks please!