# Button

A versatile button component with multiple variants and sizes, built with Class Variance Authority (CVA) for consistent styling.

## Features

- **Multiple variants**: Primary, secondary, outline, ghost, and destructive
- **Three sizes**: Small, medium, and large
- **Accessibility**: Focus states and disabled states
- **TypeScript**: Fully typed with proper prop interfaces
- **CVA Integration**: Dynamic styling with variant props

## Variants

### Primary

The default button style with blue background.

```tsx
<Button variant="primary">Primary Button</Button>
```

<ComponentExample className="my-4">
  <Button variant="primary">Primary Button</Button>
</ComponentExample>

### Secondary

A subtle button with surface background.

```tsx
<Button variant="secondary">Secondary Button</Button>
```

<ComponentExample className="my-4">
  <Button variant="secondary">Secondary Button</Button>
</ComponentExample>

### Outline

A button with border and transparent background.

```tsx
<Button variant="outline">Outline Button</Button>
```

<ComponentExample className="my-4">
  <Button variant="outline">Outline Button</Button>
</ComponentExample>

### Ghost

A minimal button with no background.

```tsx
<Button variant="ghost">Ghost Button</Button>
```

### Destructive

A button for destructive actions with red styling.

```tsx
<Button variant="destructive">Delete</Button>
```

## Sizes

### Small

```tsx
<Button size="sm">Small Button</Button>
```

### Medium (Default)

```tsx
<Button size="md">Medium Button</Button>
```

### Large

```tsx
<Button size="lg">Large Button</Button>
```

## Props

| Prop        | Type                                                                | Default     | Description            |
| ----------- | ------------------------------------------------------------------- | ----------- | ---------------------- |
| `children`  | `React.ReactNode`                                                   | -           | Button content         |
| `variant`   | `"primary" \| "secondary" \| "outline" \| "ghost" \| "destructive"` | `"primary"` | Button style variant   |
| `size`      | `"sm" \| "md" \| "lg"`                                              | `"md"`      | Button size            |
| `onClick`   | `() => void`                                                        | -           | Click handler          |
| `disabled`  | `boolean`                                                           | `false`     | Disabled state         |
| `type`      | `"button" \| "submit" \| "reset"`                                   | `"button"`  | HTML button type       |
| `className` | `string`                                                            | `""`        | Additional CSS classes |

## Examples

### Form Submit Button

```tsx
<Button type="submit" variant="primary">
  Submit Form
</Button>
```

### Disabled Button

```tsx
<Button disabled variant="secondary">
  Disabled Button
</Button>
```

### Custom Styling

```tsx
<Button variant="outline" size="lg" className="w-full">
  Full Width Button
</Button>
```

### Event Handling

```tsx
<Button variant="destructive" onClick={() => handleDelete()}>
  Delete Item
</Button>
```

## Accessibility

The Button component includes proper accessibility features:

- **Focus states**: Visible focus ring with `focus-visible:ring-2`
- **Disabled states**: Proper disabled styling and pointer events
- **Keyboard navigation**: Full keyboard support
- **Screen readers**: Proper semantic HTML button element

## Styling

The component uses Tailwind CSS with Catppuccin color palette:

- **Primary**: `bg-ctp-blue` with hover states
- **Secondary**: `bg-ctp-surface1` with subtle hover effects
- **Outline**: Border with `border-ctp-surface1`
- **Ghost**: Transparent with hover background
- **Destructive**: `bg-ctp-red` for dangerous actions

## CVA Configuration

The button variants are defined using Class Variance Authority:

```typescript
const buttonVariants = cva("base-styles", {
  variants: {
    variant: {
      /* variant styles */
    },
    size: {
      /* size styles */
    },
  },
  defaultVariants: {
    variant: "primary",
    size: "md",
  },
});
```

This ensures consistent styling and easy customization across the application.