From b36d4439c4386d53d04b46d39fadf11d0539e700 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 23 Jan 2024 18:24:48 +0300
Subject: [PATCH] Add new link button demo

---
 doc/button/LinkDoc.vue | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/doc/button/LinkDoc.vue b/doc/button/LinkDoc.vue
index 3653d5be1..d857aff79 100644
--- a/doc/button/LinkDoc.vue
+++ b/doc/button/LinkDoc.vue
@@ -1,10 +1,15 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>A button can be rendered as a link when the <i>link</i> property is present. On the other hand, adding <i>.p-button</i> class to an anchor element displays the link as a button.</p>
+        <p>A button can be displayed as a link element when the <i>link</i> property is present. If you need to use buttons for navigation, wrap the button inside a component like <i>NuxtLink</i> or <i>router-link</i> depending on your router.</p>
     </DocSectionText>
     <div class="card flex justify-content-center gap-3">
         <Button label="Link" link />
-        <a href="https://vuejs.org" target="_blank" rel="noopener noreferrer" class="p-button font-bold">Navigate</a>
+        <NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
+            <Button label="External" />
+        </NuxtLink>
+        <router-link to="/" target="_blank" rel="noopener">
+            <Button label="Router" />
+        </router-link>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,13 +21,23 @@ export default {
             code: {
                 basic: `
 <Button label="Link" link />
-<a href="https://vuejs.org" target="_blank" rel="noopener noreferrer" class="p-button font-bold">Navigate</a>
+<NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
+    <Button label="External" />
+</NuxtLink>
+<router-link to="/" target="_blank" rel="noopener">
+    <Button label="Router" />
+</router-link>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center gap-3">
         <Button label="Link" link />
-        <a href="https://vuejs.org" target="_blank" rel="noopener noreferrer" class="p-button font-bold">Navigate</a>
+        <NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
+            <Button label="External" />
+        </NuxtLink>
+        <router-link to="/" target="_blank" rel="noopener">
+            <Button label="Router" />
+        </router-link>
     </div>
 </template>
 
@@ -33,7 +48,12 @@ export default {
 <template>
     <div class="card flex justify-content-center gap-3">
         <Button label="Link" link />
-        <a href="https://vuejs.org" target="_blank" rel="noopener noreferrer" class="p-button font-bold">Navigate</a>
+        <NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
+            <Button label="External" />
+        </NuxtLink>
+        <router-link to="/" target="_blank" rel="noopener">
+            <Button label="Router" />
+        </router-link>
     </div>
 </template>