# IconButton Component

The `IconButton` component is designed for icon-only buttons in compact interfaces.

## Basic Usage

```svelte
<script lang="ts">
  import IconButton from '@ticatec/uniface-element/IconButton';
  
  const handleEdit = async (event: MouseEvent) => {
    // Handle edit action
  };
</script>

<IconButton 
  icon="icon_google_edit"
  type="primary"
  onClick={handleEdit}
/>
```

## Usage Examples

```svelte
<script lang="ts">
  import IconButton from '@ticatec/uniface-element/IconButton';
  
  const toolbarActions = {
    edit: async () => { /* edit logic */ },
    delete: async () => { /* delete logic */ },
    share: async () => { /* share logic */ },
    favorite: async () => { /* favorite logic */ }
  };
</script>

<!-- Toolbar icon buttons -->
<div class="toolbar">
  <IconButton icon="icon_google_edit" type="default" onClick={toolbarActions.edit} />
  <IconButton icon="icon_google_delete" type="third" onClick={toolbarActions.delete} />
  <IconButton icon="icon_google_share" type="secondary" onClick={toolbarActions.share} />
  <IconButton icon="icon_google_favorite" type="primary" onClick={toolbarActions.favorite} />
</div>

<!-- Different sizes -->
<IconButton icon="icon_google_settings" size="big" onClick={toolbarActions.edit} />
<IconButton icon="icon_google_settings" size="medium" onClick={toolbarActions.edit} />
<IconButton icon="icon_google_settings" size="mini" onClick={toolbarActions.edit} />

<!-- With custom slot content -->
<IconButton type="primary" onClick={toolbarActions.edit}>
  <i class="icon_google_edit"></i>
</IconButton>

<style>
  .toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
  }
</style>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `icon` | `string` | `''` | Icon class (e.g., Google Material Icons) |
| `type` | `ButtonType` | `'default'` | Visual style variant |
| `size` | `'big' \| 'medium' \| 'mini'` | `'medium'` | Button size |
| `disabled` | `boolean` | `false` | Disable button interaction |
| `style` | `string` | `''` | Custom CSS styles |
| `onClick` | `(event: MouseEvent) => void` | - | Click event handler |

## Style Variants

### ButtonType Options

```typescript
type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
```

### Visual Appearance

- **default**: Standard neutral button appearance
- **primary**: Emphasizes primary actions (typically blue)
- **secondary**: Secondary actions button (typically gray)
- **third**: Alternative style (typically for warnings/caution)
- **forth**: Additional style variant

### Size Variants

- **big**: Large icon button for prominent actions
- **medium**: Standard icon button for most use cases
- **mini**: Small icon button for compact interfaces

## Common Icons

Using `@ticatec/uniface-google-material-icons` icon library:

```svelte
<!-- Edit actions -->
<IconButton icon="icon_google_edit" />
<IconButton icon="icon_google_create" />
<IconButton icon="icon_google_mode_edit" />

<!-- Delete actions -->
<IconButton icon="icon_google_delete" type="third" />
<IconButton icon="icon_google_delete_forever" type="third" />
<IconButton icon="icon_google_remove" type="third" />

<!-- View actions -->
<IconButton icon="icon_google_visibility" />
<IconButton icon="icon_google_preview" />
<IconButton icon="icon_google_search" />

<!-- Settings actions -->
<IconButton icon="icon_google_settings" />
<IconButton icon="icon_google_tune" />
<IconButton icon="icon_google_more_vert" />

<!-- Navigation actions -->
<IconButton icon="icon_google_arrow_back" />
<IconButton icon="icon_google_arrow_forward" />
<IconButton icon="icon_google_close" />

<!-- Status actions -->
<IconButton icon="icon_google_favorite" type="primary" />
<IconButton icon="icon_google_star" type="primary" />
<IconButton icon="icon_google_bookmark" />
```

## Use Cases

IconButton component is particularly suitable for:

- Data table row actions
- Toolbar buttons
- Card actions
- Compact navigation controls
- Status toggle buttons

## Best Practices

### Data Table Row Actions

```svelte
<script lang="ts">
  import IconButton from '@ticatec/uniface-element/IconButton';
  
  export let item: any;
  export let onEdit: (item: any) => Promise<void>;
  export let onDelete: (item: any) => Promise<void>;
  export let onView: (item: any) => Promise<void>;
</script>

<div class="table-actions">
  <IconButton 
    icon="icon_google_visibility" 
    type="default" 
    onClick={async () => await onView(item)} 
  />
  <IconButton 
    icon="icon_google_edit" 
    type="primary" 
    onClick={async () => await onEdit(item)} 
  />
  <IconButton 
    icon="icon_google_delete" 
    type="third" 
    onClick={async () => await onDelete(item)} 
  />
</div>

<style>
  .table-actions {
    display: flex;
    gap: 4px;
  }
</style>
```

### Card Action Bar

```svelte
<script lang="ts">
  import IconButton from '@ticatec/uniface-element/IconButton';
  
  let isFavorite = false;
  let isBookmarked = false;
  
  const toggleFavorite = async () => {
    isFavorite = !isFavorite;
    // Save state to server
  };
  
  const toggleBookmark = async () => {
    isBookmarked = !isBookmarked;
    // Save state to server
  };
  
  const shareContent = async () => {
    // Share functionality
  };
</script>

<div class="card-actions">
  <IconButton 
    icon={isFavorite ? "icon_google_favorite" : "icon_google_favorite_border"}
    type={isFavorite ? "primary" : "default"}
    onClick={toggleFavorite}
  />
  <IconButton 
    icon={isBookmarked ? "icon_google_bookmark" : "icon_google_bookmark_border"}
    type={isBookmarked ? "primary" : "default"}
    onClick={toggleBookmark}
  />
  <IconButton 
    icon="icon_google_share"
    type="secondary"
    onClick={shareContent}
  />
</div>

<style>
  .card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 8px 0;
  }
</style>
```

### Toolbar Layout

```svelte
<script lang="ts">
  import IconButton from '@ticatec/uniface-element/IconButton';
  
  const toolbarActions = {
    save: async () => { /* save */ },
    undo: async () => { /* undo */ },
    redo: async () => { /* redo */ },
    settings: async () => { /* settings */ }
  };
</script>

<div class="editor-toolbar">
  <div class="toolbar-group">
    <IconButton icon="icon_google_save" type="primary" onClick={toolbarActions.save} />
  </div>
  
  <div class="toolbar-divider"></div>
  
  <div class="toolbar-group">
    <IconButton icon="icon_google_undo" onClick={toolbarActions.undo} />
    <IconButton icon="icon_google_redo" onClick={toolbarActions.redo} />
  </div>
  
  <div class="toolbar-divider"></div>
  
  <div class="toolbar-group">
    <IconButton icon="icon_google_settings" onClick={toolbarActions.settings} />
  </div>
</div>

<style>
  .editor-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
  }
  
  .toolbar-group {
    display: flex;
    gap: 4px;
  }
  
  .toolbar-divider {
    width: 1px;
    height: 24px;
    background: #d0d0d0;
    margin: 0 4px;
  }
</style>
```

## Click Throttling

IconButton component implements automatic click throttling with a 500ms cooldown to prevent accidental double-clicks and ensure proper async operation handling.