How to open a dialog from an anchor (when it is clicked or hover over it) ?

I was trying to open a dialog window while an anchor link is clicked. There’s no click listener so I had to go with focus listener as an alternative, and at this point it is bit of annoying as there’s no other way to get around unless I use a Button.

focus listener isn’t working as well because of the same issue that was reported 2 years back:

P.S: I can’t use Button since it has to be a link on the header and it should open a dialog when it is clicked (my specific usecase).

Hi! I don’t know what do you mean ‘it has to be a link’, but in my app for excel export download I use a similar anchor which holds a button. Then I can use the button’s click listener.

Anchor anchor = new Anchor();
anchor.add(new Component[]{myLinkButton});
// add your anchor where you want
myLinkButton.addCLickListener(clickEvent -> { /* handle your click event or call a method */ });```

And in your CSS, if you have a vaadin-button.css then put it in, if you haven't then make one with this. The link-button makes the button looks like a link:
```:host(.link-button) {
    background: transparent;
    padding: var(--button-link-padding);
    color: var(--link-color);
    text-decoration: underline;
--button-link-padding and the other CSS variables can be customized by your taste

If that’s not the way to go, some code snippets would help then I could help more.

yes, button can be padded into an anchor (just like you mentioned)
But I dont want to make it look like a button, but just a link with a click listener / hover listener that will open up a dialog.

it will look like a link if you follow the CSS above

in btw, let me try that css


can we put the css here?

Anyway, I don’t know if the button or the anchor has a hover listener. I only see focusListeners.


The CSS workaround works as expected.
Thank you for the tips

your welcome :wink: