Automatic wrap of button text with Vaadin 14


i try to wrap long texts with the Java button in Vaadin 14. I found some examples for Vaadin 8 and earlier which aren’t working anymore. I am using the Lumo theme so far. Any help/hint are appreciated!


As a general rule, try to avoid using long, wrapping texts in a button. Try if you can move some of that text outside the button, or convey the context of the button in some other way. The button label/text should usually be a verb, 1–3 words max.

If you can’t avoid a long text, then you need to adjust the style of the button.

Place the following in a CSS file:

:host {
  height: auto;

  white-space: normal;

And then include that file in your app with the annotation:

@CssImport(value = "path/to/your/css-file.css", themeFor ="vaadin-button")

See for more info.


now my button is acting like expected.

And yes, i am “misusing” the button because a label or something similar is not clickable.