src/lib/components/Button.svelte

<script lang="ts">
import { goto } from '$app/navigation';
	import Icon from "@iconify/svelte";

  export let theme: "light" | "dark" | "blue" | "pink"  = "light";
  export let size: "md" | "lg" = "md";
  export let href: string | undefined = undefined;
  export let icon: string | undefined = undefined;
  export let iconPosition: "left" | "right" = "left";
  export let disabled: boolean = false;
  export let loading: boolean = false;
  export let onClick: () => void = () => {};

  const handleClick = async () => {
    if (href) {
      goto(href);
      return
    }
    if (disabled || loading) return;
    onClick();
  };

</script>

<button on:click={handleClick} class="button {theme} {size}">
  {#if icon && iconPosition === "left"}
    <Icon icon={icon} class="w-[20px] h-[20px]" />
  {/if}
  <!-- {#if loading}
    <Icon icon="akar-icons:circle" class="w-5 h-5 animate-spin" />
  {/if} -->
  <slot />
  {#if icon && iconPosition === "right"}
    <Icon icon={icon} class="w-[20px] h-[20px]" />
  {/if}
</button>

<style lang="scss">
  .button {
    @apply rounded-full outline-none border font-medium flex items-center justify-center gap-1.5 transition-all duration-200 cursor-pointer;
    &.lg {
      @apply px-6 py-3 text-base;
    }
    &.md {
      @apply px-5 py-2 text-sm;
    }
    &.light {
      @apply bg-white text-neutral-900 border-white;
    }
    &.pink {
      @apply bg-pink-500 text-white border-pink-500;
    }
    &.dark {
      @apply bg-neutral-900 border-neutral-800 text-neutral-300;
    }
    &:hover {
      @apply brightness-125
    }
  }
</style>