@neynar/ui/docs/llm/components/buttons.md

React UI component library built on shadcn/ui and Tailwind CSS

# Button Components

## Button

Primary interactive element with multiple variants and sizes.

```tsx
import { Button } from "@neynar/ui"

// Basic usage
<Button onClick={() => console.log("clicked")}>Click me</Button>

// Variants
<Button variant="default">Default</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">🔥</Button>

// AsChild pattern - renders as different element
<Button asChild>
  <a href="/profile">Go to Profile</a>
</Button>
```

## Toggle

Single toggle state component for on/off interactions.

```tsx
import { Toggle } from "@neynar/ui"

<Toggle pressed={isPressed} onPressedChange={setIsPressed}>
  Bold
</Toggle>

<Toggle variant="outline" size="sm">
  Italic
</Toggle>
```

## ToggleGroup

Group of related toggles with single or multiple selection.

```tsx
import { ToggleGroup, ToggleGroupItem } from "@neynar/ui"

// Single selection
<ToggleGroup type="single" value={align} onValueChange={setAlign}>
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="center">Center</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>

// Multiple selection
<ToggleGroup type="multiple" value={features} onValueChange={setFeatures}>
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
</ToggleGroup>
```