Buttons that are links

[cbenz]

I'd like to create a link to an URL, rendered as a button.

For now if I create a <Button on:click={() => goto("https://.../")> then the user will not be able to see the target of the link, disabling the possibility of doing ctrl-click to open in a new tab, etc.

So I'd like to have a <Button> that would accept a href (or to) property, and would be rendered as a <a href="...". I'd like also to setup a target="_blank" attribute if needed.

Is this need doable with another approach? Is it something planned from your side @matyunya?

Related work in other libraries:

• vuetify <Button> accepts a to property which generates links
  • remark: it creates links compatible with vue-router but in sapper this would not be necessary as sapper automatically detects links and triggers navigation events

[BogdanDarius]

Not the best way but you could do something like this:

<a href="http://website.com">
  <Button>Visit us!</Button>
</a>

There is no way to to create a dynamic element (see sveltejs/svelte#2324).
A solution would be to have another property to the button like type that can be either button or a. That would require changes to the component like:

{#if type === "button"}
...make a button
{:else if type === "a"}
...make an anchor
{/if}

[cbenz]

Thanks @BogdanDarius, that worked perfectly.
I'm going to use a <ButtonLink> component in my project.

When dynamic elements will exist, I think that Smelte will make use of them for implementing button links.

[matyunya]

Thanks! Added in 0.1.6.

Addind href now creates a button wrapped in anchor, it receives arbitrary props as well, so you may pass target to it or anything else. Please tell me if you find any issue with it.

[cbenz]

Great @matyunya !

I could use it here: https://jailbreak.frama.io/vitrine/

Just a quick note: if I pass <Button class="xxx"> then the class is applied to the <a> element and the inner <button> element, which is not always wanted. So I ended up by wrapping the <Button> component like that (example with ml-auto class):

<div class="ml-auto">
  <Button href="https://example.com/" target="_blank">Register</Button>
</div>

where it could have been:

<Button class="ml-auto" href="https://example.com/" target="_blank">Register</Button>