How to create a button that looks like a link

Hi,

I have a css theme that I am using as the basis of my project. This theme has <a> links in it that I need to replace with Vaadin Buttons (or some other click listener enabled component). I declare the button as follows:

<vaadin-button class="go_checkout" theme="tertiary" id="goCheckout"></vaadin-button>

which replaced:

<a class="go_checkout" href="checkout.html">Checkout</a>

But the css class go_checkout is not applied and the Lumo theme tertiary is applied instead.

  1. How can I suppress the Lumo theme for this button so that the link looks like the original themed html link?
  2. Is there another component that I can use instead that has a click listener? Maybe using the “on-click” attribute?

Thanks for the help.

  1. You can’t really suppress the theme for individual buttons. You can remove it, but then it’s gone from all buttons
  2. You can add a click listener to any element using the on-click attribute

Also, the theme="tertiary-inline" theme variant is one option, as it removes all padding from the button and inherits the font-size and line-height from the parent scope, so it’s very close to a regular link.