Htmx on links doesn't appear as link

[florian-sun]

When I apply htmx to an "a" element, it doesn't appear as a link (no hand indicator, no full link shown in browser bottom etc), just plain text. It still triggers the link though when clicked.
Do I miss something?

<a hx-get="/mylink" hx-target="#myid" hx-swap="innerHTML">Link name</a>

Actually you can see how it looks here (html enabled):
Link name

This is what I am expecting:
Link name

[Telroshan]

Hey, that's normal as htmx doesn't apply any styling (except the default indicator classes), and since browsers don't know about htmx, they use their standard link styling strategy. Without a href attribute defined, browsers will render your link like a simple text instead of the style you would expect.

To make a link look like what you would expect, you can either

• Set its href attribute.
  In this case, you'll probably want to define href="/mylink". Be aware though that this will let your users right click + open in new tab, which is usually what you want from a link, just don't forget to handle partial swap response vs full page load (you can rely on the HX-Request header for that, see the progressive enhancement section of the docs)
• Add some CSS to style your links. Use this if you want a button to look like a link but not behave like a link (i.e. no right click + open in new tab). This doesn't require much CSS ; remove background, padding, border, add a color, and another color + text decoration on hover, that's it!

Hope this helps

[florian-sun]

Thank you but I have a question. If there is both a href and hx-get to same url, doesn't it lead to visiting the server twice?

[Telroshan]

@florian-sun the hx-get will have htmx preventDefault() on click, thus only 1 request (made by htmx) will be done.
Right click + open in new tab will, on the other hand, not call htmx at all (which cannot operate out of its active tab) so will still result in a single request

[florian-sun]

Ok, thanks.