Button

// Import from shared component library
import { Button } from "@neo/test-components"

// Primary button (default)
<Button>Click me</Button>

// Button variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="danger-soft">Danger Soft</Button>

// Button sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>  {/* default */}
<Button size="lg">Large</Button>

// Disabled state
<Button isDisabled>Disabled</Button>

// Loading state
<Button isPending>
  <Spinner size="sm" />
  Loading...
</Button>

// Icon only
<Button isIconOnly variant="tertiary">
  ⚙️
</Button>

/* globals.css - customize button styles */
@layer components {
  .button { /* base styles */ }
  .button--sm { /* small size */ }
  .button--md { /* medium size */ }
  .button--lg { /* large size */ }
  .button--primary { /* primary variant */ }
  .button--secondary { /* secondary variant */ }
  .button--tertiary { /* tertiary variant */ }
  .button--ghost { /* ghost variant */ }
  .button--danger { /* danger variant */ }
  .button--icon-only { /* icon only */ }
}