# Button

## Description

Flexible button component with multiple variants, sizes, and states. Supports icons, loading states, and various styling options to fit different use cases throughout the application.

## Aliases

- Action Button
- CTA (Call to Action)
- Click Button
- Submit Button

## Props Breakdown

**Extends:** `HTMLAttributes<HTMLButtonElement>` (excluding `style`)

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `appearance` | `'Default' \| 'Inverse'` | `'Default'` | No | Visual appearance theme of the button |
| `type` | `'Filled' \| 'Outlined' \| 'Ghost'` | `'Filled'` | No | Visual style variant of the button |
| `style` | `'Primary' \| 'Secondary' \| 'Destructive'` | `'Primary'` | No | Color scheme and intent of the button |
| `size` | `'Small' \| 'Medium' \| 'Large'` | `'Medium'` | No | Size variant of the button |
| `loading` | `boolean` | `false` | No | Shows loading spinner and disables interaction |
| `disabled` | `boolean` | `false` | No | Disables the button and shows disabled state |
| `leadingIcon` | `ReactNode` | - | No | Icon to display before the button text |
| `trailingIcon` | `ReactNode` | - | No | Icon to display after the button text |
| `onClick` | `(event?: MouseEvent<HTMLElement>) => void` | - | No | Click event handler |
| `className` | `string` | - | No | Additional CSS class names |
| `actionType` | `'button' \| 'submit' \| 'reset'` | `'button'` | No | HTML button type attribute |
| `children` | `ReactNode` | - | No | Button content/text |

Plus all standard HTML button attributes (id, title, aria-*, data-*, etc.).

## Examples

### Basic Usage
```tsx
import { Button } from '@delightui/components';

function BasicExample() {
  return (
    <Button onClick={() => console.log('Clicked')}>
      Click Me
    </Button>
  );
}
```

### Button Variants
```tsx
function VariantsExample() {
  return (
    <div className="button-group">
      {/* Different types */}
      <Button type="Filled">Filled Button</Button>
      <Button type="Outlined">Outlined Button</Button>
      <Button type="Ghost">Ghost Button</Button>
      
      {/* Different styles */}
      <Button style="Primary">Primary</Button>
      <Button style="Secondary">Secondary</Button>
      <Button style="Destructive">Delete</Button>
    </div>
  );
}
```

### Button Sizes
```tsx
function SizesExample() {
  return (
    <div className="button-sizes">
      <Button size="Small">Small</Button>
      <Button size="Medium">Medium</Button>
      <Button size="Large">Large</Button>
    </div>
  );
}
```

### Buttons with Icons
```tsx
import { PlusIcon, ArrowRightIcon } from '@heroicons/react/24/outline';

function IconButtonsExample() {
  return (
    <div className="icon-buttons">
      <Button leadingIcon={<PlusIcon />}>
        Add Item
      </Button>
      
      <Button trailingIcon={<ArrowRightIcon />}>
        Continue
      </Button>
      
      <Button 
        leadingIcon={<PlusIcon />}
        trailingIcon={<ArrowRightIcon />}
      >
        Add & Continue
      </Button>
    </div>
  );
}
```

### Loading and Disabled States
```tsx
function StatesExample() {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    setLoading(true);
    await new Promise(resolve => setTimeout(resolve, 2000));
    setLoading(false);
  };

  return (
    <div className="button-states">
      <Button 
        loading={loading}
        onClick={handleSubmit}
      >
        Submit with loading
      </Button>
      
      <Button disabled>
        Disabled Button
      </Button>
    </div>
  );
}
```

### Form Integration
```tsx
import { Button, Form, FormField, Input } from '@delightui/components';

function FormExample() {
  const handleSubmit = (values, setError) => {
    console.log('Form submitted with values:', values);
    // Handle form submission
  };

  const handleReset = () => {
    console.log('Form reset');
  };

  return (
    <Form onSubmit={handleSubmit}>
      <FormField name="name" label="Full Name" required>
        <Input placeholder="Enter your name" />
      </FormField>
      
      <FormField name="email" label="Email" required>
        <Input inputType="Email" placeholder="Enter your email" />
      </FormField>
      
      <div className="form-actions">
        <Button 
          actionType="reset"
          type="Outlined"
          style="Secondary"
          onClick={handleReset}
        >
          Reset
        </Button>
        
        <Button 
          actionType="submit"
          style="Primary"
        >
          Submit Form
        </Button>
      </div>
    </Form>
  );
}
```

### Appearance Variants
```tsx
function AppearanceExample() {
  return (
    <div className="appearance-variants">
      {/* Default appearance */}
      <Button appearance="Default">Default Theme</Button>
      
      {/* Inverse appearance for dark backgrounds */}
      <div className="dark-background">
        <Button appearance="Inverse">Inverse Theme</Button>
      </div>
    </div>
  );
}
```