buttonvaadinmenuitemmenubar

Vaadin 23.2.7 button and menuBar have different sizes

I add to the HorizontalLayout with the same dimensions

button:

Icon icon = new Icon(VaadinIcon.SEARCH);
Button searchButton = new Button("Search", icon);
searchButton.setIconAfterText(false);
searchButton.setWidth(140, Unit.PIXELS);
searchButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

layout.add(searchButton);

and menuBar

MenuBar menuBar = new MenuBar();
menuBar.setWidth(140, Unit.PIXELS);
menuBar.addThemeVariants(MenuBarVariant.LUMO_PRIMARY);
menuBar.addItem("Save");

layout.add(menuBar);

The display of elements in the browser is different, despite the same width (140, Unit.PIXELS).

enter image description here

Please tell me how it can be fixed

I tried different options here https://vaadin.com/docs/v23/components/menu-bar, but it didn't help

I tried https://start.vaadin.com/app create a new project (Vaadin 24) with the same code, but the result is equally bad :(

enter image description here

Solution

  • I replaced all the Buttons with MenuBar. Now everything looks the same

    before:

    Icon icon = new Icon(VaadinIcon.SEARCH);
Button searchButton = new Button("Search", icon);
searchButton.setIconAfterText(false);
searchButton.setWidth(140, Unit.PIXELS);
searchButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

layout.add(searchButton);

MenuBar menuBar = new MenuBar();
menuBar.setWidth(140, Unit.PIXELS);
menuBar.addThemeVariants(MenuBarVariant.LUMO_PRIMARY);
menuBar.addItem("Save");

layout.add(menuBar);

    after:

                searchMenuBar = new MenuBar();
        searchMenuBar.setWidth(150, Unit.PIXELS);
        searchMenuBar.addThemeVariants(MenuBarVariant.LUMO_PRIMARY);
        Label findLabel = new Label("Search");
        findLabel.setWidth(90, Unit.PIXELS);
        MenuItemUtil.createIconItem(searchMenuBar, VaadinIcon.SEARCH, findLabel, null);

layout.add(searchMenuBar);

        saveMenuBar = new MenuBar();
        saveMenuBar.setWidth(150, Unit.PIXELS);
        saveMenuBar.addThemeVariants(MenuBarVariant.LUMO_PRIMARY);
        saveMenuBar.setEnabled(false);
        Label saveTitle = new Label("Save");
        saveTitle.setWidth(90, Unit.PIXELS);
        menuItem = MenuItemUtil.createIconItem(saveMenuBar, VaadinIcon.DOWNLOAD, saveTitle, null);
        SubMenu moveSubMenu = menuItem.getSubMenu();
        moveSubMenu.addItem("Save to PDF");


layout.add(saveMenuBar);