class as props

Author: jellydeck

app/components/Button/Base.vue

@@ -4,6 +4,7 @@ const props = withDefaults(
     'disabled'?: boolean
     'type'?: 'button' | 'submit'
     'variant'?: 'primary' | 'secondary'
+    'class'?: string
     'size'?: 'small' | 'medium'
     'keyshortcut'?: string
 
@@ -33,7 +34,7 @@ defineExpose({
   <button
     ref="el"
     class="rounded-md outline-none group"
-    :class="$attrs.class"
+    :class="props.class"
     :type="props.type"
     :disabled="
       /**
@@ -47,13 +48,14 @@ defineExpose({
     :aria-keyshortcuts="keyshortcut"
   >
     <span
-      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md hover:rounded-xl active:rounded-xl font-mono border border-solid transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
+      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md font-mono border border-solid transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
       :class="{
         'text-sm px-4 py-2': size === 'medium',
         'text-xs px-2 py-0.5': size === 'small',
         'text-fg bg-transparent border-transparent hover:(bg-fg/10 border-fg/10)':
           variant === 'secondary',
-        'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
+        'text-bg bg-fg border-fg hover:(bg-fg/80 rounded-xl) active:rounded-xl':
+          variant === 'primary',
         'opacity-40 cursor-not-allowed border-transparent': disabled,
       }"
     >

app/components/Link/Base.vue

@@ -12,6 +12,7 @@ const props = withDefaults(
       'type'?: never
       'variant'?: 'button-primary' | 'button-secondary' | 'link'
       'size'?: 'small' | 'medium'
+      'class'?: string
 
       'keyshortcut'?: string
 
@@ -62,7 +63,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   <span
     v-if="disabled"
     :class="{
-      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border  border-red rounded-md':
+      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border  rounded-md':
         isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
@@ -88,7 +89,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
         'text-fg bg-transparent hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
         'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'button-primary',
       },
-      $attrs.class,
+      props.class,
     ]"
     :to="to"
     :aria-keyshortcuts="keyshortcut"