From 73e8ec79f399ad0a68c52f3838095b104d93dc5d Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Wed, 20 Jul 2022 12:36:41 +0200
Subject: [PATCH 1/2] Turn the button into a link when href is provided

Sometimes is useful to have links that are styled as buttons. This
allows to pass in an href prop to the button component and turns the
native root html element into an `a` when that's provided.

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/components/Button/Button.vue | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index af1b5ff6d2..10e9ff1008 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -198,8 +198,8 @@ button {
 </docs>
 
 <template>
-	<button class="button-vue"
-		v-bind="$attrs"
+	<root-element class="button-vue"
+		v-bind="rootElement"
 		:class="buttonClassObject"
 		:aria-label="ariaLabel"
 		:type="nativeType"
@@ -220,7 +220,7 @@ button {
 				<slot />
 			</span>
 		</span>
-	</button>
+	</root-element>
 </template>
 <script>
 
@@ -281,6 +281,15 @@ export default {
 			type: String,
 			default: null,
 		},
+
+		/**
+		 * Providing the href attribute turns the button component into a an `a`
+		 * element
+		 */
+		href: {
+			type: String,
+			default: '',
+		},
 	},
 
 	data() {
@@ -300,6 +309,21 @@ export default {
 	},
 
 	computed: {
+		// Determines whether the root element is an a or a button
+		rootElement() {
+			if (this.href) {
+				return {
+					is: 'a',
+					href: this.href,
+					...this.$attrs,
+				}
+			}
+			return {
+				is: 'button',
+				...this.$attrs,
+			}
+		},
+
 		hasText() {
 			return this.slots?.default !== undefined
 				&& this.slots?.default[0]?.text

From ed8d824c8fd4f5928ca5e5699b1ac7a07e7d7a4d Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@pm.me>
Date: Wed, 20 Jul 2022 13:46:01 +0200
Subject: [PATCH 2/2] Update src/components/Button/Button.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

Signed-off-by: Marco <marcoambrosini@pm.me>
---
 src/components/Button/Button.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index 10e9ff1008..08c61e20d9 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -288,7 +288,7 @@ export default {
 		 */
 		href: {
 			type: String,
-			default: '',
+			default: null,
 		},
 	},