Button

import { Button } from "@grassroot/ui-react";
const buttonFixture = {
  id: "button",
  buttons: [
    { id: "primary", label: "Start a project" },
    { id: "secondary", label: "View work", variant: "secondary" },
    { id: "ghost", label: "See the work", variant: "ghost" },
    { id: "link", label: "Read the case study", variant: "link" },
    { id: "small", label: "Small", size: "sm" },
    { id: "large", label: "Large", size: "lg" },
    { id: "disabled", label: "Disabled", disabled: true },
  ],
} satisfies {
  id: string;
  buttons: Array<{
    id: string;
    label: string;
    variant?: "primary" | "secondary" | "ghost" | "link";
    size?: "sm" | "md" | "lg";
    disabled?: boolean;
  }>;
};
 
export default function ButtonDemo() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "14px" }}>
      {buttonFixture.buttons.map((button) => (
        <Button
          key={button.id}
          variant={button.variant}
          size={button.size}
          disabled={button.disabled}
        >
          {button.label}
        </Button>
      ))}
    </div>
  );
}

<script setup lang="ts">
import { Button } from "@grassroot/ui-vue";
const buttonFixture = {
  id: "button",
  buttons: [
    { id: "primary", label: "Start a project" },
    { id: "secondary", label: "View work", variant: "secondary" },
    { id: "ghost", label: "See the work", variant: "ghost" },
    { id: "link", label: "Read the case study", variant: "link" },
    { id: "small", label: "Small", size: "sm" },
    { id: "large", label: "Large", size: "lg" },
    { id: "disabled", label: "Disabled", disabled: true },
  ],
} satisfies {
  id: string;
  buttons: Array<{
    id: string;
    label: string;
    variant?: "primary" | "secondary" | "ghost" | "link";
    size?: "sm" | "md" | "lg";
    disabled?: boolean;
  }>;
};
 
</script>
 
<template>
  <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 14px">
    <Button
      v-for="button in buttonFixture.buttons"
      :key="button.id"
      :variant="button.variant"
      :size="button.size"
      :disabled="button.disabled"
      >{{ button.label }}</Button
    >
  </div>
</template>

import { Component } from "@angular/core";
import { GrassrootButton } from "@grassroot/ui-angular";
const buttonFixture = {
  id: "button",
  buttons: [
    { id: "primary", label: "Start a project" },
    { id: "secondary", label: "View work", variant: "secondary" },
    { id: "ghost", label: "See the work", variant: "ghost" },
    { id: "link", label: "Read the case study", variant: "link" },
    { id: "small", label: "Small", size: "sm" },
    { id: "large", label: "Large", size: "lg" },
    { id: "disabled", label: "Disabled", disabled: true },
  ],
} satisfies {
  id: string;
  buttons: Array<{
    id: string;
    label: string;
    variant?: "primary" | "secondary" | "ghost" | "link";
    size?: "sm" | "md" | "lg";
    disabled?: boolean;
  }>;
};
 
@Component({
  selector: "app-button-demo",
  standalone: true,
  imports: [GrassrootButton],
  template: `
    <div style="display:flex;flex-wrap:wrap;align-items:center;gap:14px">
      @for (button of fixture.buttons; track button.id) {
        <grassroot-button
          [variant]="button.variant"
          [size]="button.size"
          [disabled]="button.disabled"
          >{{ button.label }}</grassroot-button
        >
      }
    </div>
  `,
})
export class ButtonDemoComponent {
  protected readonly fixture = buttonFixture;
}
 
export default ButtonDemoComponent;

<script lang="ts">
  import { Button } from "@grassroot/ui-svelte";
  const buttonFixture = {
    id: "button",
    buttons: [
      { id: "primary", label: "Start a project" },
      { id: "secondary", label: "View work", variant: "secondary" },
      { id: "ghost", label: "See the work", variant: "ghost" },
      { id: "link", label: "Read the case study", variant: "link" },
      { id: "small", label: "Small", size: "sm" },
      { id: "large", label: "Large", size: "lg" },
      { id: "disabled", label: "Disabled", disabled: true },
    ],
  } satisfies {
    id: string;
    buttons: Array<{
      id: string;
      label: string;
      variant?: "primary" | "secondary" | "ghost" | "link";
      size?: "sm" | "md" | "lg";
      disabled?: boolean;
    }>;
  };
 
  </script>
 
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:14px">
  {#each buttonFixture.buttons as button (button.id)}
    <Button variant={button.variant} size={button.size} disabled={button.disabled}
      >{button.label}</Button
    >
  {/each}
</div>

/** @jsxImportSource solid-js */
import { Button } from "@grassroot/ui-solid";
import type { JSX } from "solid-js";
const buttonFixture = {
  id: "button",
  buttons: [
    { id: "primary", label: "Start a project" },
    { id: "secondary", label: "View work", variant: "secondary" },
    { id: "ghost", label: "See the work", variant: "ghost" },
    { id: "link", label: "Read the case study", variant: "link" },
    { id: "small", label: "Small", size: "sm" },
    { id: "large", label: "Large", size: "lg" },
    { id: "disabled", label: "Disabled", disabled: true },
  ],
} satisfies {
  id: string;
  buttons: Array<{
    id: string;
    label: string;
    variant?: "primary" | "secondary" | "ghost" | "link";
    size?: "sm" | "md" | "lg";
    disabled?: boolean;
  }>;
};
 
export default function ButtonDemo(): JSX.Element {
  return (
    <div style={{ display: "flex", "flex-wrap": "wrap", "align-items": "center", gap: "14px" }}>
      {buttonFixture.buttons.map((button) => (
        <Button variant={button.variant} size={button.size} disabled={button.disabled}>
          {button.label}
        </Button>
      ))}
    </div>
  );
}