Button: Support button with text wrap

[InforOttoLing]

Is your feature request related to a problem or use case? Please describe. The Button component has an issue, when we are trying to display the text of the button on the right side of the icon. This is an issue, because for languages that have very long strings (eg. German), displaying the text beside the icon would take up too much hortizontal space, and cause the button(or the text) to overflow.

Describe the solution you'd like 2 Potential solution:

1. Allow setting max width of the button, and allow the text being displayed in the button to wrap, instead of displaying everything in a single line.
2. Allow using a button style where the text is displayed under the icon.

Describe alternatives you've considered Create a custom component within the product that performs displays text under the icon.

Additional context And what application do you work on? Infor Workforce Management(WFM)

[tmcconechy]

What if we limited it to one or two lines?

[InforOttoLing]

Yes, that would help, but it kind of depends on exactly how it is implemented. The main issue we are facing is that, the design of the web page lacks horizontal spacing to have too many long buttons. Having 2 lines would effectively doube the amount of space we have to put text, which should be more than sufficient for my specific use case

[tmcconechy]

@InforOttoLing im trying to avoid like 5-10 lines or something crazy in a button.

We do have these "buttons" as well https://main-enterprise.demo.design.infor.com/components/cards/example-actionable.html not sure if that applies.

Do you have any potential designs i can pass to our design team in triaging this one?

[InforOttoLing]

Interesting, never really considered using cards as pseudo buttons, definitely something we can look into trying out.

This is what the custom component we are using looks like, not sure if it helps

[tmcconechy]

What about just icon buttons if the problem is real estate. Not a fan of the card buttons myself either they actually take up more but thought maybe that was the use case.

Lets see what design says. BTW was looking at maybe a full page design so i can see the issue. Dont want to introduce something uneeded.

[InforOttoLing]

Here you go. The custom component we built have fixed width, and the text wraps around if it doesn't fit in 1 line

[inforandy]

Thanks for clarifying. This was discussed in our last meeting with the WFM team and we suggested to investigate our Flex Toolbar for alternative approaches to this issue. We'll discuss this issue with the design team and consider next steps.