How to add a button icon and button border that looks like square?

Is there any examples for using a button that has an icon and a border that looks like square?

For the icon, you can add it using java:

For the square border, there is no pre-made style for it so you’ll have to add a custom style. In the Java file, add the following annotation on the class:
@CssImport(value = "./styles/vaadin-button-styles.css", themeFor = "vaadin-button")
And for each button you want to be square add this class name:

The annotation points to a CSS file that you should create; the . in the path points to the frontend folder, meaning the file should be at (project root)/frontend/styles/vaadin-button-styles.css.

The file content should be this:

:host(.square-bordered) {
    border-radius: 0;
    border: 1px solid black;
    background: none;

I’m not the best at making styles pretty, but that should give you an idea on where to put any CSS :slight_smile:

The example above will style any Button with the given classname. If you want all buttons to look like that, you can leave out all addClassName() calls, and have the first line in the CSS file be this instead:
:host {