Button type links

[dvelasquez]

Development Relevant Information:

• BalmUI version: 8.18.0
• Browser: Edge 88 (Chromium)
• Operating System: Windows 10

Description:

Thanks for this amazing implementation of Material Design for Vue.

I've been looking at the source code and I haven't been able to find a way to use anchors <a href="">. All the button implementations wraps the component in <button> tags, which is useful, but for SEO reasons is better to use an anchor.

I've also tried to wrap the <ui-button> with <a></a> tags but this changes the looks in the label and this doesn't look pretty anymore.

For now I'm implementing a link component myself calling directly the Material Design classes, but this could be handled as a <ui-button type="link">

Steps To Reproduce:

• Create a <ui-button>
• • wrap it in an <a></a>

[elf-mouse]

Hi @dvelasquez ,

The early versions BalmUI has designed the link component, but it is not practical in vue projects (usually we will use router-link), so it was finally removed.

If you want to use the link rendered as button, recommend you to use like this:

<a class="mdc-button">Link</a>
<a class="mdc-button" v-ripple>Link with ripple</a>

[dvelasquez]

Thanks @elf-mouse for the answer.

I ended up cloning the ui-button code and replacing it with a nuxt-link https://github.com/dvelasquez/nuxt-static-site/blob/2b5af684df314be4f7b16ccc46599e115b4052de/components/UiLink.vue

I needed to do this otherwise nuxtjs can crawl over the pages and generate them.

Thanks again for your great work :)

[elf-mouse]

Hi @dvelasquez ,

I have been added v-button directive for links since 8.31.0

<a v-button href="javascript:void(0)">Link</a>

This usage is better! See button docs for details.

[dvelasquez]

Hey, thanks very much for the update!

…

On Fri, 9 Apr 2021, 08:33 N.Elf-mousE, ***@***.***> wrote: Hi @dvelasquez <https://github.com/dvelasquez> , I have been added v-button directive for links since 8.31.0 <a v-button href="javascript:void(0)">Link</a> This usage is better! See button docs <https://material.balmjs.com/#/general/button> for details. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#44 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABEBOGOBAS6K7LH7KOOS2HTTH2NTHANCNFSM4XGFD2ZQ> .