When should you use a link versus a button?
If a ‘link’ takes the user to a new page, anchor or updates the URL (web address) then it should be a link (a tag). If the ‘link’ performs an action e.g. toggles something on/off on the page, then it should be a button tag.
HTML examples of links
<a href="page.html">I link to a new page</a>
<a href="#anchor">I link to a section on the page</a>
<a href="?search=term">I update the URL query parameter</a>
<a href="?page=2">I update the URL query parameter</a>
HTML examples of buttons
<button type="submit" onClick="{handleSubmit}">I submit a form</button>
<button
aria-controls="my-menu"
aria-expanded="false"
type="button"
onClick="{handleClick}"
>
I toggle a menu
</button>
<button aria-label="I close a dialog" type="button" onClick="{handleClick}">
X
</button>
A general rule of thumb, if it has a onClick handler then it should be a button. Unless that handler is for analytics/marketing tracking.
Links that look like buttons and vice versa
In a component library you should be able to style a button to look like a link (a) and link to look like a button with a CSS class it may look like this:
<a class="button" href="page.html">I am a link but I look like a button</a>
<button class="button" type="button" onClick="{handleClick}">
I am a button and I look like a button
</button>
<a class="a" href="page.html">I am a link and I look like a link</a>
<button class="a" type="button" onClick="{handleClick}">
I am a button but I look like a link
</button>