chore: button styles

app/javascript/v3/components/Form/Button.vue

@@ -7,20 +7,20 @@
     @click="handleClick"
   >
     <fluent-icon
-      v-if="icon"
+      v-if="icon && !iconOnly"
       :size="iconSize"
       :icon="icon"
       class="flex-shrink-0"
     />
     <span
-      v-if="$slots.default"
+      v-if="$slots.default && !iconOnly"
       class="text-sm font-medium truncate"
       :class="{ 'text-left rtl:text-right': size !== 'expanded' }"
     >
       <slot />
     </span>
     <fluent-icon
-      v-if="rightIcon"
+      v-if="rightIcon || iconOnly"
       :size="iconSize"
       icon="chevron-right"
       class="flex-shrink-0"
@@ -46,10 +46,6 @@ export default {
       type: String,
       default: '',
     },
-    emoji: {
-      type: String,
-      default: '',
-    },
     colorScheme: {
       type: String,
       default: 'primary',
@@ -74,14 +70,27 @@ export default {
       type: Boolean,
       default: false,
     },
+    iconOnly: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     buttonClasses() {
       return [this.colorClass, this.sizeClass];
     },
     colorClass() {
+      if (this.isDisabled) {
+        return 'bg-ash-200 text-ash-600 cursor-not-allowed';
+      }
       if (this.colorScheme === 'primary') {
-        return 'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
+        if (this.variant === 'outline') {
+          return 'text-primary-800 border  border-primary-400 hover:text-primary-600 active:text-primary-600 focus:ring focus:ring-offset-1 focus:ring-primary-400';
+        }
+        if (this.variant === 'ghost') {
+          return 'text-primary-800 hover:text-primary-600 active:text-primary-600 focus:ring focus:ring-offset-1 focus:ring-primary-400';
+        }
+        return 'bg-primary-600 border-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
       }
       if (this.colorScheme === 'secondary') {
         return 'bg-ash-100 text-ash-900 hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
@@ -92,17 +101,13 @@ export default {
       return 'bg-primary-500 text-white';
     },
     sizeClass() {
-      if (this.size === 'md') {
+      if (this.size === 'medium') {
         return 'px-3 py-2 text-sm';
       }
       return 'px-4 py-2.5 text';
     },
     iconSize() {
       switch (this.size) {
-        case 'tiny':
-          return 12;
-        case 'small':
-          return 14;
         case 'medium':
           return 16;
         case 'large':