keeptrack / client / src / lib / components / interaction / Button.svelte

<script lang="ts">
   import Icon from "$lib/components/content/Icon.svelte";
   import type { ButtonProps } from "$lib/types";

   let {
      children,
      icon,
      shape = "square",
      scheme = "default",
      variant = "default",
      icon_position = "left",
      class: class_,
      ...rest
   }: ButtonProps = $props();

   let classes = $derived([
      scheme === "default" && "scheme-default",
      scheme === "primary" && "scheme-primary",
      variant === "default" && "variant-default",
      variant === "text" && "variant-text",
      shape === "square" && "shape-square",
      shape === "rounded" && "shape-rounded",
      shape === "circle" && "shape-circle",
      icon !== undefined && "with-icon",
      "button",
      class_,
   ]);
</script>

<button class={classes} {...rest}>
   {#if icon && icon_position === "left"}
      <Icon name={icon} />
   {/if}
   {#if children}
      {@render children()}
   {/if}
   {#if icon && icon_position === "right"}
      <Icon name={icon} />
   {/if}
</button>