Automatic wrap of button text with Vaadin 14

Flow
1

Hello,

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!

Mark

2

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;
}

[part="label"]
 {
  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 https://vaadin.com/tutorials/themes-and-styling-in-vaadin#_bundled_local_file_system for more info.

3

Thanks,

now my button is acting like expected.

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

Mark