Use Button component as link

[thefrana]

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primevue/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=110

Current behavior

The Button component can be used only as an ordinary button, but there are a lot of use cases where I need to point to a specific location.

Right now, I use something like

<router-link
  class="p-button p-component p-button-secondary p-button-text"
  :to="{ name: 'some-location', params: { id: 42 } }"
>
  <span
    class="pi pi-external-link p-button-icon p-button-icon-left"
  />
  <span class="p-button-label">Link</span>
</router-link>

Expected behavior

It would use <RouterLink> under the hood, but the same can be applied to <a> links.

<Button :to="{ name: 'some-location', params: { id: 42 } }">Link</Button>

If you do not intend to implement this feature, what is the recommended way of doing similar behavior?

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Vue version: 3.2.6

• PrimeVue version: 3.8.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[tugcekucukoglu]

The aim is here is to keep Button as a standard button but PrimeVue gives just theming and icons. We suggest this usage

<router-link to="...">
     <Button label="Link" class="p-button-link" />
</router-link>

Thanks,

[thefrana]

Thank you!

[matthew-dean]

@tugcekucukoglu You can't be serious. This wraps the <button> in an <a> tag which is invalid HTML. This also has side-effects for accessibility, where both the <a> and <button> are accessible elements. Typically, UI libraries allow you to set what type of element is rendered (<a> or <button>) and/or allow you to set what type of routing element it is (NuxtLink or RouterLink).

[matthew-dean]

Note: if anyone else comes across this issue and is using NuxtLink or RouterLink, until PrimeVue fixes this, make sure your code looks something like:

<NuxtLink
    to="/new-page"
    tabindex="-1"
  >
    <Button>
      PrimeVue button
    </Button>
  </NuxtLink>

[tugcekucukoglu]

https://github.com/primefaces/primevue/pull/3552#issuecomment-1689581807