fix(Button): loading on trailing

playground/pages/button.vue

@@ -14,11 +14,19 @@
       <UButton loading>
         Loading
       </UButton>
+
+      <UButton loading leading-icon="i-heroicons-rocket-launch">
+        Loading
+      </UButton>
     </div>
     <div class="flex items-center gap-2">
       <UButton loading trailing>
         Loading
       </UButton>
+
+      <UButton loading trailing-icon="i-heroicons-paper-airplane">
+        Loading
+      </UButton>
     </div>
     <div class="flex items-center gap-2">
       <UButton truncate class="w-16">

src/runtime/components/Button.vue

@@ -52,7 +52,7 @@ const slots = defineSlots<ButtonSlots>()
 const appConfig = useAppConfig()
 const linkProps = useForwardProps(reactiveOmit(props, 'type', 'label', 'color', 'variant', 'size', 'icon', 'leading', 'leadingIcon', 'trailing', 'trailingIcon', 'loading', 'loadingIcon', 'square', 'block', 'disabled', 'truncate', 'class', 'ui'))
 
-const isLeading = computed(() => (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || !!props.leadingIcon)
+const isLeading = computed(() => (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing && !props.trailingIcon) || !!props.leadingIcon)
 const isTrailing = computed(() => (props.icon && props.trailing) || (props.loading && props.trailing) || !!props.trailingIcon)
 
 // FIXME: Cannot extend multiple times

src/theme/button.ts

@@ -56,11 +56,6 @@ export default (config: { colors: string[] }) => ({
         label: 'truncate'
       }
     },
-    loading: {
-      true: {
-        leadingIcon: 'animate-spin'
-      }
-    },
     block: {
       true: {
         base: 'w-full',
@@ -75,6 +70,9 @@ export default (config: { colors: string[] }) => ({
     },
     trailing: {
       true: ''
+    },
+    loading: {
+      true: ''
     }
   },
   compoundVariants: [...config.colors.map((color: string) => ({
@@ -149,9 +147,16 @@ export default (config: { colors: string[] }) => ({
     size: 'xl',
     square: true,
     class: 'p-2.5'
+  }, {
+    loading: true,
+    leading: true,
+    class: {
+      leadingIcon: 'animate-spin'
+    }
   }, {
     loading: true,
     leading: false,
+    trailing: true,
     class: {
       trailingIcon: 'animate-spin'
     }