Button with Icon on top?

I want a button with the icon on top. Is that doable with Button? I can sort of make it happen if I override stuff in the browser DevTools, but not through styles.css.
Should I just give up and use a VerticalLayout styled as a Button?

there’s no built-in way to do that, but you can put a verticallayout inside the button, instead of just a text

something like

VerticalLayout iconAndLabel = new VerticalLayout(VaadinIcon.ABACUS.create(), new Span("Calculate"));
iconAndLabel.setAlignItems(Alignment.CENTER);
iconAndLabel.setSpacing(false);
iconAndLabel.setPadding(false);
Button vertButton = new Button(iconAndLabel);
vertButton.setHeight("54px");

it’s possible to achieve with css too, but surprisingly awkward

(we really should have a built-in variant for that)

The AI suggested something like that, but the content then overflowed the button. Possibly because this way of doing it sets the “icon” part, and the icon slot has a fixed size?

you will need to set an appropriate height for the button, like I do in my sample.

Functionally I was happy with my “VerticalLayout styled as a button”, but I’ve replaced with your example. Worked like a charm :grinning:

A layout styled as a button is neither keyboard-accessible nor parsable by screen readers, so it’s a very problematic approach. I’m glad my solution worked for you.