Button

// Import from shared component library
import { Button } from "@neo/test-components"
// Lucide icons are SSR-compatible
import { Plus, Settings, Trash2 } from "lucide-react"

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

// With icons (gap handles spacing automatically)
<Button variant="primary">
  <Plus className="w-4 h-4" />
  Create New
</Button>

// Icon on right (no margin needed)
<Button variant="secondary">
  Continue
  <ChevronRight className="w-4 h-4" />
</Button>

// Icon only
<Button isIconOnly variant="tertiary">
  <Settings className="w-4 h-4" />
</Button>

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

// Loading state (use animate-spin on icon)
<Button isPending>
  <Loader2 className="w-4 h-4 animate-spin" />
  Loading...
</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 */ }
}