# IconButton

A specialized button component designed specifically for displaying icons without text content. IconButton inherits most functionality from the Button component but is optimized for icon-only interactions. It provides a compact, accessible way to trigger actions using only visual icons, making it perfect for toolbars, navigation, and space-constrained interfaces.

## Aliases

- IconButton
- IconBtn
- ActionIcon

## Props Breakdown

**Extends:** `HTMLAttributes<HTMLButtonElement>` (via ButtonProps, excluding `leadingIcon`, `trailingIcon`, `style`, `size`)

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `appearance` | `'Default' \| 'Inverse'` | `'Default'` | No | Appearance of the button |
| `icon` | `ReactNode` | `undefined` | No | The icon to be displayed |
| `style` | `'Primary' \| 'Secondary'` | `'Primary'` | No | Style of the button |
| `size` | `'Small' \| 'Medium'` | `'Medium'` | No | Size of the button |
| `type` | `'Filled' \| 'Outlined' \| 'Ghost'` | `'Filled'` | No | Type of the button |
| `loading` | `boolean` | `false` | No | Indicates if the button is in a loading state |
| `disabled` | `boolean` | `false` | No | Specifies if the button is disabled |
| `onClick` | `(event?: MouseEvent<HTMLElement>) => void` | `undefined` | No | Click event handler for the button |
| `className` | `string` | `undefined` | No | Additional class for styling |
| `actionType` | `'button' \| 'submit' \| 'reset'` | `'button'` | No | Type of action associated with the button |

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

## Examples

### Basic Icon Button

```tsx
import { IconButton, Icon } from '@delightui/components';

function BasicIconButtonExample() {
  const handleClick = () => {
    console.log('Icon button clicked!');
  };

  return (
    <IconButton
      icon={<Icon name="AddFilled" />}
      onClick={handleClick}
    />
  );
}
```

### Different Sizes

```tsx
import { IconButton, Icon } from '@delightui/components';

function SizedIconButtonsExample() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
      <IconButton
        size="Small"
        icon={<Icon name="SearchFilled" />}
        onClick={() => console.log('Small search')}
      />
      
      <IconButton
        size="Medium"
        icon={<Icon name="SearchFilled" />}
        onClick={() => console.log('Medium search')}
      />
    </div>
  );
}
```

### Different Styles and Types

```tsx
import { IconButton, Icon } from '@delightui/components';

function StyledIconButtonsExample() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      {/* Primary Styles */}
      <div style={{ display: 'flex', gap: '8px' }}>
        <IconButton
          style="Primary"
          type="Filled"
          icon={<Icon name="CheckFilled" />}
        />
        <IconButton
          style="Primary"
          type="Outlined"
          icon={<Icon name="CheckFilled" />}
        />
        <IconButton
          style="Primary"
          type="Ghost"
          icon={<Icon name="CheckFilled" />}
        />
      </div>

      {/* Secondary Styles */}
      <div style={{ display: 'flex', gap: '8px' }}>
        <IconButton
          style="Secondary"
          type="Filled"
          icon={<Icon name="InfoFilled" />}
        />
        <IconButton
          style="Secondary"
          type="Outlined"
          icon={<Icon name="InfoFilled" />}
        />
        <IconButton
          style="Secondary"
          type="Ghost"
          icon={<Icon name="InfoFilled" />}
        />
      </div>
    </div>
  );
}
```

### Different Appearances

```tsx
import { IconButton, Icon } from '@delightui/components';

function AppearanceIconButtonsExample() {
  return (
    <div style={{ display: 'flex', gap: '16px' }}>
      <IconButton
        appearance="Default"
        icon={<Icon name="AddFilled" />}
        onClick={() => console.log('Default appearance')}
      />
      
      <IconButton
        appearance="Inverse"
        icon={<Icon name="AddFilled" />}
        onClick={() => console.log('Inverse appearance')}
      />
    </div>
  );
}
```

### Loading State

```tsx
import { IconButton, Icon } from '@delightui/components';

function LoadingIconButtonExample() {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = async () => {
    setIsLoading(true);
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 2000));
    setIsLoading(false);
  };

  return (
    <IconButton
      icon={<Icon name="SearchFilled" />}
      loading={isLoading}
      onClick={handleClick}
    />
  );
}
```

### Disabled State

```tsx
import { IconButton, Icon } from '@delightui/components';

function DisabledIconButtonExample() {
  return (
    <div style={{ display: 'flex', gap: '16px' }}>
      <IconButton
        icon={<Icon name="AddFilled" />}
        disabled={false}
        onClick={() => console.log('Enabled button clicked')}
      />
      
      <IconButton
        icon={<Icon name="AddFilled" />}
        disabled={true}
        onClick={() => console.log('This will not be called')}
      />
    </div>
  );
}
```

### Form Integration

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

function FormIconButtonExample() {
  const [showPassword, setShowPassword] = useState(false);

  const handleSubmit = (data: any) => {
    console.log('Form submitted:', data);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <FormField name="email" label="Email">
        <Input type="email" />
      </FormField>

      <FormField name="password" label="Password">
        <div style={{ position: 'relative' }}>
          <Input type={showPassword ? 'text' : 'password'} />
          <IconButton
            type="Ghost"
            size="Small"
            icon={<Icon name={showPassword ? 'VisibilityOffFilled' : 'VisibilityOnFilled'} />}
            onClick={() => setShowPassword(!showPassword)}
            style={{ position: 'absolute', right: '8px', top: '50%', transform: 'translateY(-50%)' }}
          />
        </div>
      </FormField>

      <Button type="submit">
        Submit
      </Button>
    </Form>
  );
}
```

### Toolbar Example

```tsx
import { IconButton, Icon } from '@delightui/components';

function ToolbarExample() {
  const handleAction = (action: string) => {
    console.log(`${action} clicked`);
  };

  return (
    <div style={{ 
      display: 'flex', 
      gap: '8px', 
      padding: '8px', 
      border: '1px solid #ccc', 
      borderRadius: '4px',
      backgroundColor: '#f9f9f9'
    }}>
      <IconButton
        size="Small"
        type="Ghost"
        icon={<Icon name="AddFilled" />}
        onClick={() => handleAction('Add')}
        title="Add item"
      />
      
      <IconButton
        size="Small"
        type="Ghost"
        icon={<Icon name="SearchFilled" />}
        onClick={() => handleAction('Search')}
        title="Search"
      />
      
      <IconButton
        size="Small"
        type="Ghost"
        icon={<Icon name="CloseDeleteOutlined" />}
        onClick={() => handleAction('Delete')}
        title="Delete"
      />
      
      <div style={{ width: '1px', backgroundColor: '#ccc', margin: '0 4px' }} />
      
      <IconButton
        size="Small"
        type="Ghost"
        icon={<Icon name="InfoFilled" />}
        onClick={() => handleAction('Info')}
        title="Information"
      />
    </div>
  );
}
```

### Navigation Example

```tsx
import { IconButton, Icon } from '@delightui/components';

function NavigationExample() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 10;

  const goToPrevious = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  const goToNext = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1);
    }
  };

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
      <IconButton
        icon={<Icon name="ChevronLeftOutlined" />}
        disabled={currentPage === 1}
        onClick={goToPrevious}
        title="Previous page"
      />
      
      <span>Page {currentPage} of {totalPages}</span>
      
      <IconButton
        icon={<Icon name="ChevronRightOutlined" />}
        disabled={currentPage === totalPages}
        onClick={goToNext}
        title="Next page"
      />
    </div>
  );
}
```

### Custom Styling

```tsx
import { IconButton, Icon } from '@delightui/components';

function CustomStyledIconButtonExample() {
  return (
    <div style={{ display: 'flex', gap: '16px' }}>
      <IconButton
        icon={<Icon name="AddFilled" />}
        className="custom-icon-button-primary"
        onClick={() => console.log('Custom primary clicked')}
      />
      
      <IconButton
        icon={<Icon name="CloseDeleteOutlined" />}
        className="custom-icon-button-danger"
        onClick={() => console.log('Custom danger clicked')}
      />
    </div>
  );
}
```

### Action Type Examples

```tsx
import { Form, IconButton, Icon, Input, FormField } from '@delightui/components';

function ActionTypeExample() {
  const handleSubmit = (data: any) => {
    console.log('Form submitted:', data);
  };

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

  return (
    <Form onSubmit={handleSubmit}>
      <FormField name="searchTerm" label="Search">
        <Input placeholder="Enter search term..." />
      </FormField>

      <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
        <IconButton
          actionType="submit"
          icon={<Icon name="SearchFilled" />}
          title="Search"
        />
        
        <IconButton
          actionType="reset"
          type="Outlined"
          icon={<Icon name="CloseDeleteOutlined" />}
          onClick={handleReset}
          title="Clear"
        />
        
        <IconButton
          actionType="button"
          type="Ghost"
          icon={<Icon name="InfoFilled" />}
          onClick={() => console.log('Info clicked')}
          title="Information"
        />
      </div>
    </Form>
  );
}
```