Button

import { Button } from "../react/index.js";

export default function ButtonDemo() {
  return (
    <div className="flex flex-col gap-4">
      {(["primary", "secondary", "ghost"] as const).map((variant) => (
        <div key={variant} className="flex flex-wrap items-center gap-3">
          {(["sm", "md", "lg"] as const).map((size) => (
            <Button key={size} variant={variant} size={size}>
              {variant} {size}
            </Button>
          ))}
        </div>
      ))}
      <div className="flex items-center gap-3">
        <Button disabled>disabled</Button>
      </div>
    </div>
  );
}

<script lang="ts">
  import { Button } from "../svelte/index.js";

  const variants = ["primary", "secondary", "ghost"] as const;
  const sizes = ["sm", "md", "lg"] as const;
</script>

<div class="flex flex-col gap-4">
  {#each variants as variant (variant)}
    <div class="flex flex-wrap items-center gap-3">
      {#each sizes as size (size)}
        <Button {variant} {size}>{variant} {size}</Button>
      {/each}
    </div>
  {/each}
  <div class="flex items-center gap-3">
    <Button disabled>disabled</Button>
  </div>
</div>