feat: Added href prop to button component

src/components/Button/composables/useButtonClasses.ts

@@ -2,6 +2,7 @@ import type { Ref } from 'vue'
 import { computed, useSlots } from 'vue'
 import classNames from 'classnames'
 import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from '../types'
+import { twMerge } from 'tailwind-merge'
 
 export type ButtonClassMap<T extends string> = { hover: Record<T, string>; default: Record<T, string> }
 
@@ -231,21 +232,21 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
       }
     }
 
-    return classNames(
+    return twMerge(
       backgroundClass,
       hoverClass,
       shadowClass,
-      props.pill.value ? '!rounded-full' : '',
-      props.disabled.value ? 'cursor-not-allowed opacity-50' : '',
+      props.pill.value && '!rounded-full',
+      props.disabled.value && 'cursor-not-allowed opacity-50',
       isGradient && isOutline ? 'p-0.5' : sizeClasses.value,
-      slots.prefix || slots.suffix || props.loading.value ? 'inline-flex items-center' : '',
+      (slots.prefix || slots.suffix || props.loading.value) && 'inline-flex items-center',
     )
   })
 
   const spanClasses = computed(() => {
     if (!!props.gradient.value && props.outline.value) {
       // ONLY FOR GRADIENT OUTLINE BUTTON
-      return classNames(
+      return twMerge(
         'relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center',
         sizeClasses.value,
         !props.disabled.value ? 'group-hover:bg-opacity-0 transition-all ease-in duration-75' : '',