Chakra-ui: [Button] Does not handle long text

[sumdook]

The button breaks when the text overflows. Could happen a lot in smaller devices.

The text should fold with the increase in button height to wrap it around. Adding wordBreak styles did not help either in my case.

• OS: MacOS
• Browser: Chrome

I apologise if I'm missing an obvious solution to fix this on my side.

[sumdook]

I've reached a solution to this. Adding whiteSpace along with wordBreak seems to do the trick. After that I handle the height by myself.

<Button

     height={[`${text.length > 30 ? "60px" : "40px"}`, "40px"]}
     style={{
          whiteSpace: "normal",
          wordWrap: "break-word",
     }}
>
     {option}
</Button>

[bogdansoare]

Having the height hard coded limits the usage of the button, maybe it will be better to use padding instead of a fixed height, what do you think @segunadebayo ?

[segunadebayo]

@bogdansoare, that's a good idea actually. I'll consider using padding for the next release.