first commit

components/ui-components/button/BaseButtons.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="d-flex ga-3 align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height d-flex justify-space-between">
+    <v-btn >elevates (default)</v-btn>
+    <v-btn variant="flat" color="primary">flat</v-btn>
+    <v-btn variant="tonal" color="primary">tonal</v-btn>
+    <v-btn variant="outlined" color="primary">outlined</v-btn>
+    <v-btn variant="text" color="primary">text</v-btn>
+    <v-btn variant="plain" color="primary">plain</v-btn>
+  </div>
+</template>

components/ui-components/button/ColorsButtons.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// buttons color data
+const btnsColor = ref(['primary', 'secondary', 'error', 'warning','success']);
+</script>
+<template>
+    <div class="d-flex ga-3 align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height">
+        <v-btn v-for="btn in btnsColor" :key="btn" :color="btn" variant="flat">
+            {{ btn }}
+        </v-btn>
+    </div>
+</template>

components/ui-components/button/IconColorSizes.vue

@@ -0,0 +1,9 @@
+<template>
+    <div class="d-flex flex-wrap justify-center ga-3 align-center flex-column flex-sm-row fill-height">
+        <v-btn color="primary" icon size="x-small" flat><BellIcon stroke-width="1.5"  /></v-btn>
+        <v-btn color="secondary" icon  size="small" flat><BellIcon stroke-width="1.5"  /></v-btn>
+        <v-btn color="success" icon flat><BellIcon stroke-width="1.5"  /></v-btn>
+        <v-btn color="error" icon size="large" flat><BellIcon stroke-width="1.5" /></v-btn>
+        <v-btn color="warning" icon  size="x-large" flat><BellIcon stroke-width="1.5"  /></v-btn>
+    </div>
+</template>

components/ui-components/button/OutlinedButtons.vue

@@ -0,0 +1,11 @@
+
+<template>
+    <div class="d-flex ga-3 justify-center align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height"> 
+       <v-btn color="primary" variant="outlined">primary</v-btn>
+        <v-btn color="secondary" variant="outlined">secondary</v-btn>
+        <v-btn variant="flat" disabled>
+            Disabled
+        </v-btn>
+        <v-btn color="info" variant="outlined">link</v-btn>
+    </div>
+</template>

components/ui-components/button/SizeButtons.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="d-flex gap-2 justify-space-around align-center flex-column flex-md-row fill-height">
+        <v-btn size="x-small" color="primary" flat>
+            Extra small
+        </v-btn>
+
+        <v-btn size="small" color="primary" flat>
+            Small
+        </v-btn>
+
+        <v-btn color="primary" flat>
+            Normal
+        </v-btn>
+
+        <v-btn color="primary" size="large" flat>
+            Large
+        </v-btn>
+
+        <v-btn size="x-large" color="primary" flat>
+            Extra large
+        </v-btn>
+    </div>
+</template>

components/ui-components/button/TextButtons.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// buttons color data
+const btnsColor = ref(['primary', 'secondary', 'success', 'error', 'warning']);
+</script>
+<template>
+    <div class="d-flex flex-wrap ga-3 my-2 align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height">
+        <v-btn v-for="btn in btnsColor" :key="btn" :color="btn" variant="text">
+            {{ btn }}
+        </v-btn>
+    </div>
+</template>