diff --git a/src/components/button/VLink.vue b/src/components/button/VLink.vue
new file mode 100644
index 0000000..6d506bf
--- /dev/null
+++ b/src/components/button/VLink.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import Button from 'primevue/button';
+import type IVLink from '@/components/button/IVLink.type';
+import { computed } from 'vue';
+import styles from '@/assets/typography.module.css'
+
+const props = defineProps<IVLink>();
+
+// Icon position computed
+const iconPos = computed<string>(() => {
+    return props.iconRight ? 'right': 'left'
+})
+
+// Change the html tag of root element
+const htmlTag = computed(() => { return props.to ? 'RouterLink' : props.href ? 'a' : 'button'})
+</script>
+
+<template>
+    <Button
+        variant="link"
+        role="link"
+        :label="props.label"
+        :aria-label="props.label"
+        :icon="props.icon"
+        :disabled="props.disabled"
+        :aria-disabled="props.disabled"
+        :icon-pos="iconPos"
+        :as="htmlTag"
+        :href="props.href"
+        :target="props.target"
+        :to="props.to"
+        :tabindex="props.disabled ? -1 : 0"
+        @click="props.disabled && $event.preventDefault()"
+        class="p-button"
+        :class="[styles['text-body-MD-standard-text-Regular']]"
+        :style="props.disabled ? { pointerEvents: 'none' } : {}"
+    />
+</template>
+
+<style lang="css" scoped>
+*{
+  text-decoration: none;
+  margin: 0px;
+  padding: 0px;
+}
+
+.p-button.p-button-link:hover{
+  border: 2px solid var(--p-button-link-color);
+}
+</style>