Download Button with Anchor looks strange

General
1

Hi everyone,

got the code below to download a file. It looks kind of strange, does anyone has an idea of how to get this easier/more optically nicer?

Without anchor the download does not work an witout Text in Anchor it also does not download. Would like to have a usual Button with icon and optional text.

   Button button = new Button("Download", VaadinIcon.DOWNLOAD.create());
            button.setHeight("25px");
            button.setWidth("25px");
            button.getStyle().setPadding("0");
            button.getStyle().setColor("white");
            Anchor downloadLink = new Anchor((DownloadEvent event) -> {
                event.setFileName("export.csv");
                event.getResponse().setHeader("Content-Type", "text/csv");
                try (OutputStream outputStream = event.getOutputStream()) {
                //Todo download
                //outputStream.write(csvBytes);
                } catch (IOException e) {
                    throw new RuntimeException("Fehler beim Schreiben der CSV-Datei", e);
                }
            }, "Download");

            downloadLink.add(button);
            layout.add(downloadLink);
2

It actually works without a Text(“”).

3

I’ve build it the opposite way. I’m adding a button with aria-hidden=true and tabindex=-1 inside the anchor.

4

Hi Nico! If you need an anchor to look like a button you can do the following (assuming you’re using Lumo):

import com.vaadin.flow.theme.lumo.LumoUtility.*;

...
Icon icon = LumoIcon.DOWNLOAD.create();
icon.addClassNames(Margin.End.XSMALL, Margin.Minus.Start.XSMALL);

anchor.add(icon);
anchor.addClassNames(
  AlignItems.CENTER,
  Background.CONTRAST_5,
  BorderRadius.MEDIUM,
  Display.FLEX,
  FontWeight.MEDIUM,
  Height.MEDIUM,
  Padding.Horizontal.MEDIUM
);
5

Well. The issue was that we have added the button to the view, not the anchor :laughing: :man_facepalming: But thanks a lot for your support everyone.

I have added it correctly in my code #1 but not in my real code :D

6

Yet another possibility is that you just use a regular button for starting the download based on the approach that is described in Support triggering a file download when clicking a button · Issue #7203 · vaadin/flow-components · GitHub. That example was based on the old StreamResource API but you can use a DownloadHandler in exactly the same way just by setting it as an attribute on the element.

7

It would be nice if Vaadin would provide a button as download component.