# Button Component

The primary `Button` component provides comprehensive button functionality with icon and label support.

## Basic Usage

```svelte
<script lang="ts">
  import Button from '@ticatec/uniface-element/Button';
  
  const handleClick = async (event: MouseEvent) => {
    console.log('Button clicked!');
    // Perform async operation
  };
</script>

<Button 
  label="Save Changes"
  type="primary"
  icon="icon_google_save"
  onClick={handleClick}
/>
```

## Advanced Configuration

```svelte
<script lang="ts">
  import Button from '@ticatec/uniface-element/Button';
  import type { ButtonType } from '@ticatec/uniface-element';
  
  let isSubmitting = false;
  
  const handleSubmit = async (event: MouseEvent) => {
    isSubmitting = true;
    try {
      await submitForm();
    } finally {
      isSubmitting = false;
    }
  };
</script>

<Button 
  label={isSubmitting ? "Submitting..." : "Submit Form"}
  type="primary"
  size="big"
  variant="round"
  icon="icon_google_send"
  disabled={isSubmitting}
  style="margin: 16px;"
  onClick={handleSubmit}
/>
```

## Properties

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

## Button with Slot Content

```svelte
<Button type="secondary" onClick={handleAction}>
  <i class="icon_google_star"></i>
  <span>Custom Content</span>
  <span class="badge">3</span>
</Button>
```

## 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 button size for prominent actions
- **medium**: Standard button size for most use cases
- **mini**: Small button size for compact interfaces

### Style Variants

- **plain**: Minimalist style variant
- **round**: Rounded corner variant
- **'' (empty string)**: Standard styling

## Icon Usage

The component uses `@ticatec/uniface-google-material-icons` as the icon library. Simply pass the icon class name:

```svelte
<!-- Common Material Icons -->
<Button icon="icon_google_save" label="Save" />
<Button icon="icon_google_edit" label="Edit" />
<Button icon="icon_google_delete" label="Delete" />
<Button icon="icon_google_add" label="Add" />
<Button icon="icon_google_remove" label="Remove" />
<Button icon="icon_google_search" label="Search" />
<Button icon="icon_google_settings" label="Settings" />
<Button icon="icon_google_home" label="Home" />
<Button icon="icon_google_check" label="Confirm" />
<Button icon="icon_google_arrow_back" label="Back" />
```

## Best Practices

### Use Appropriate Button Types

Choose the correct button type based on action importance:

```svelte
<!-- Primary actions -->
<Button label="Save" type="primary" />
<Button label="Submit" type="primary" />

<!-- Secondary actions -->
<Button label="Cancel" type="secondary" />
<Button label="Preview" type="secondary" />

<!-- Dangerous actions -->
<Button label="Delete" type="third" />
<Button label="Remove" type="third" />
```

### Handle Async Operations Properly

Always handle loading states and errors:

```svelte
<script lang="ts">
  let isLoading = false;
  let error = null;
  
  const handleAction = async () => {
    isLoading = true;
    error = null;
    
    try {
      await performAction();
    } catch (err) {
      error = err.message;
    } finally {
      isLoading = false;
    }
  };
</script>

<Button 
  label={isLoading ? "Processing..." : "Start Process"}
  type="primary"
  disabled={isLoading}
  onClick={handleAction}
/>

{#if error}
  <div class="error">{error}</div>
{/if}
```

### Provide Visual Feedback

Use icons and appropriate styling:

```svelte
<!-- Success actions -->
<Button label="Save" icon="icon_google_save" type="primary" />

<!-- Dangerous actions -->
<Button label="Delete" icon="icon_google_delete" type="third" />

<!-- Navigation actions -->
<Button label="Back" icon="icon_google_arrow_back" type="secondary" />
```

### Consider Mobile Responsiveness

Use appropriate sizes for different screen sizes:

```svelte
<div class="responsive-buttons">
  <!-- Desktop: normal size, Mobile: larger for touch -->
  <Button label="Action" size="big" class="mobile-friendly" />
</div>

<style>
  .responsive-buttons .mobile-friendly {
    /* Responsive styles */
  }
  
  @media (max-width: 768px) {
    .responsive-buttons .mobile-friendly {
      min-height: 44px; /* iOS recommended touch target size */
    }
  }
</style>
```

## Accessibility Considerations

**⚠️ Important Note**: The current button components have the following accessibility limitations:

- **Non-semantic elements**: All buttons use `<div>` elements instead of `<button>`
- **Hidden from screen readers**: All buttons have `aria-hidden="true"` by default
- **No keyboard navigation**: Components don't support Tab navigation or Enter/Space activation
- **No focus management**: Components don't provide focus method or support `bind:this`
- **No ARIA attribute support**: Custom aria-* attributes cannot be passed

For full accessibility compliance, consider wrapping components with proper semantic elements.