✨ feat: Added button component

src/components/button/VButton.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import Button from 'primevue/button';
+import type IVButton from './IVButton.type';
+import { computed } from 'vue';
+import styles from '@visua/typography.module.css';
+
+// Props configuration with default values
+const props = withDefaults(defineProps<IVButton>(), {
+    disabled: false,
+    label: undefined,
+    secondary: false,
+    tertiary: false,
+    iconRight: false,
+    noOutline: false,
+    danger: false,
+    size: 'md',
+    icon: '',
+    onClick: () => undefined,
+})
+
+// Button size class computed
+const size = computed(() => {
+  if (['sm', 'small'].includes(props.size)) return 'small';
+  else if (['md', 'medium', '', undefined].includes(props.size)) return undefined;
+  else if (['lg', 'large'].includes(props.size)) return 'large';
+  else return undefined;
+})
+
+// Icon position computed
+const iconPos = computed<string>(() => {
+    return props.iconRight ? 'right': 'left'
+})
+
+// Button variant computed
+const variant = computed(() => {
+    if(props.noOutline) return 'text';
+    else if (props.secondary || props.tertiary) return 'outlined';
+    else return undefined;
+})
+
+// Button severity computed
+const severity = computed(() => {
+    if(props.secondary) return 'secondary';
+    else if(props.danger) return 'danger';
+    else return undefined
+});
+
+// Button font computed
+const font = computed(() => {
+    switch (size.value) {
+        case 'large': return styles['text-body-LG-article-text-Regular'];
+        case 'small': return styles['text-body-SM-detail-text-Regular'];
+        default: return styles['text-body-MD-standard-text-Regular'];
+    }
+})
+
+</script>
+
+<template>
+    <Button
+      :label="props.label"
+      :variant="variant"
+      :severity="severity"
+      :icon="props.icon"
+      :size="size"
+      :class="['p-button', font]"
+      v-bind="$attrs"
+      :disabled="props.disabled"
+      :aria-disabled="props.disabled"
+      :icon-pos="iconPos"
+      :onclick="props.onClick"
+      :title="props.title"
+      role="button"
+      :aria-label="props.label"
+    >
+    </Button>
+</template>
+
+<style scoped>
+/* disable state */
+.p-button:disabled{
+    /* variant: primary or default */
+    --p-button-primary-background: var(--background-disabled-grey);
+    --p-button-primary-hover-background: var(--background-disabled-grey);
+    --p-button-primary-active-background: var(--background-disabled-grey);
+    --p-button-primary-color: var(--text-disabled-grey);
+    --p-button-primary-hover-color: var(--text-disabled-grey);
+    --p-button-primary-active-color: var(--text-disabled-grey);
+    /* variant: danger */
+    --p-button-danger-background: var(--background-disabled-grey);
+    --p-button-danger-hover-background: var(--background-disabled-grey);
+    --p-button-danger-active-background: var(--background-disabled-grey);
+    --p-button-danger-color: var(--text-disabled-grey);
+    --p-button-danger-hover-color: var(--text-disabled-grey);
+    --p-button-danger-active-color: var(--text-disabled-grey);
+    /* variant: secondary and tertiary */
+    --p-button-secondary-background: var(--background-transparent);
+    --p-button-secondary-hover-background: var(--background-transparent);
+    --p-button-secondary-active-background: var(--background-transparent);
+    --p-button-secondary-border-color: var(--border-disabled-grey);
+    --p-button-secondary-hover-border-color: var(--border-disabled-grey);
+    --p-button-secondary-active-border-color: var(--border-disabled-grey);
+
+    --p-button-outlined-primary-hover-background: var(--background-transparent);
+    --p-button-outlined-primary-active-background: var(--background-transparent);
+    --p-button-outlined-primary-border-color: var(--border-disabled-grey);
+    --p-button-outlined-primary-color: var(--text-disabled-grey);
+    --p-button-outlined-secondary-hover-background: var(--background-transparent);
+    --p-button-outlined-secondary-active-background: var(--background-transparent);
+    --p-button-outlined-secondary-border-color: var(--border-disabled-grey);
+    --p-button-outlined-secondary-color: var(--text-disabled-grey);
+    /* variant: no-outline */
+    --p-button-text-primary-hover-background: var(--background-transparent);
+    --p-button-text-primary-active-background: var(--background-transparent);
+    --p-button-text-primary-color: var(--text-disabled-grey);
+    -webkit-user-select: none;
+    user-select: none;
+}
+</style>