Button

Pick a framework. Both use the same recipe, so the styling matches exactly.

Button props for React
Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "ghost"	primary	Visual style.
size	"sm" \| "md" \| "lg"	md	Height and padding.
disabled	boolean		Blocks clicks and dims the button.

Also takes className and children. Anything else passes through to the button.

button.demo.tsx

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>
  );
}

Button props for Svelte
Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "ghost"	primary	Visual style.
size	"sm" \| "md" \| "lg"	md	Height and padding.
disabled	boolean		Blocks clicks and dims the button.

Also takes class and snippet children. Anything else passes through to the button.

button.demo.svelte

<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>