Widget button width and text size issues

I am using the button widget. I have the button widget width set to auto. The issue that I am having is some of my button text has long string and the string is getting cut off. Is there any way to have the button widget width to get bigger according to the text length so that none of my text is cut off.

The button should not grow, it is the expected behavior. You can can force line-wrapping by adding this to the css:

.label {
  word-break: break-all;
  white-space: normal;
}

Actually you can do/hack this by making the width depend on the label’s length:

JS{{
// width property
return @{this.label}.length * 8
}}