1 files changed, 26 insertions, 7 deletions
diff --git a/components/Button.vue b/components/Button.vue
index 97ff928..2d24bad 100644
--- a/components/Button.vue
+++ b/components/Button.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Loader2Icon } from 'lucide-vue-next'
-import { defineProps } from 'vue';
+import { defineProps, type FunctionalComponent } from 'vue';
 
 defineProps({
   isLoading: {
@@ -20,15 +20,20 @@ defineProps({
     default: "",
   },
   kind: {
-    type: String as PropType<"primary" | "secondary">,
+    type: String as PropType<"primary" | "secondary" | "danger">,
     default: "primary",
   },
+  icon: {
+    type: Object as PropType<FunctionalComponent>,
+    default: null
+  }
 });
 </script>
 
 <template>
   <button :type="type" :disabled="disabled || loading" :class="kind">
     <Loader2Icon v-if="loading" class="icon-loader" />
+    <component :is="icon" v-else-if="icon" />
     <span>
       <slot />
     </span>
@@ -40,6 +45,8 @@ button {
   width: 100%;
   display: flex;
   justify-content: center;
+  align-items: center;
+  gap: 0.4rem;
   padding: 0.5rem 1rem;
   border: 1px solid transparent;
   border-radius: 0.375rem;
@@ -51,6 +58,11 @@ button {
   transition: background-color 0.2s ease;
 }
 
+button svg {
+  height: var(--text-small);
+  width: var(--text-small);
+}
+
 button:hover {
   background-color: var(--color-primary-dark);
 }
@@ -67,16 +79,15 @@ button:disabled {
 
 .icon-loader {
   animation: spin 1s linear infinite;
-  margin-left: -0.25rem;
-  margin-right: 0.75rem;
-  height: 1.25rem;
-  width: 1.25rem;
-  color: white;
 }
   
 button.primary {
   background-color: var(--color-primary);
 }
+
+button.primary:hover {
+  background-color: var(--color-primary-dark);
+}
   
 button.secondary {
   background-color: var(--color-background);
@@ -89,6 +100,14 @@ button.secondary:hover {
   border: 1px solid var(--color-primary-dark);
   color: var(--color-primary-dark);
 }
+  
+button.danger {
+  background-color: var(--color-error);
+}
+
+button.danger:hover {
+  background-color: var(--color-error-dark);
+}
 
 @keyframes spin {
   0% {