From e40491208ac1096e505803072df0d9e2e771008e Mon Sep 17 00:00:00 2001
From: "Haytham A. Salama" <haythamasalama@gmail.com>
Date: Sat, 16 Sep 2023 22:50:55 +0300
Subject: [PATCH] feat(Link): add `as` prop (#535)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docs/content/2.elements/9.link.md        |  2 +-
 src/runtime/components/elements/Link.vue | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/docs/content/2.elements/9.link.md b/docs/content/2.elements/9.link.md
index 1273d872..bc24836d 100644
--- a/docs/content/2.elements/9.link.md
+++ b/docs/content/2.elements/9.link.md
@@ -17,6 +17,6 @@ The Link component is a wrapper around [`<NuxtLink>`](https://nuxt.com/docs/api/
 
 The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link) guide.
 
-It also renders an `<a>` tag when a `to` prop is provided, otherwise it renders a `<button>` tag.
+It also renders an `<a>` tag when a `to` prop is provided, otherwise it defaults to rendering a `<button>` tag. The default behavior can be customized using the `as` prop.
 
 It is used underneath by the [Button](/elements/button), [Dropdown](/elements/dropdown) and [VerticalNavigation](/navigation/vertical-navigation) components.
diff --git a/src/runtime/components/elements/Link.vue b/src/runtime/components/elements/Link.vue
index f583a555..98702d27 100644
--- a/src/runtime/components/elements/Link.vue
+++ b/src/runtime/components/elements/Link.vue
@@ -1,7 +1,13 @@
 <template>
-  <button v-if="!to" :type="type" :disabled="disabled" v-bind="$attrs" :class="inactiveClass">
+  <component
+    :is="as"
+    v-if="!to"
+    :disabled="disabled"
+    v-bind="$attrs"
+    :class="inactiveClass"
+  >
     <slot />
-  </button>
+  </component>
   <NuxtLink
     v-else
     v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal }"
@@ -32,9 +38,9 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     ...NuxtLink.props,
-    type: {
+    as: {
       type: String,
-      default: null
+      default: 'button'
     },
     disabled: {
       type: Boolean,