Linebreak on button caption

How do I put multiline button caption. I want a line break my labels are pretty long.

image

 private Button generateButton(ServiceType serviceType) {
    Button button = uiComponents.create(Button.class);
    button.setId("btn_st_" + serviceType.getCode());
    button.setCaption("Hola \n" + serviceType.getName());
    button.setWidth("100%");
    button.setHeight("100%");
    button.setStyleName("primary");
    button.addClickListener(e -> addItem(e));
    return button;
}

Thanks in Advance.

Hello!

You can add supporting multiline caption in Button using CSS , for instance:

.multiline-caption-button {
  &.v-button {
    height: auto;
  }
  .v-button-caption {
    white-space: pre;
  }
}
<button id="multilineBtn" stylename="multiline-caption-button"/>
@Autowired
private Button multilineBtn;

@Subscribe
public void onInit(InitEvent event) {
    multilineBtn.setCaption("First line\nSecond line");
}

image

4 Likes

A post was split to a new topic: How to place caption of TextField to the left