# TextButton Component

The `TextButton` component is optimized for text-only buttons with minimal styling.

## Basic Usage

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

<TextButton 
  label="Cancel"
  type="secondary"
  onClick={handleCancel}
/>
```

## Usage Examples

```svelte
<script lang="ts">
  import TextButton from '@ticatec/uniface-element/TextButton';
  
  const actions = {
    save: async () => { /* save logic */ },
    delete: async () => { /* delete logic */ },
    cancel: async () => { /* cancel logic */ }
  };
</script>

<!-- Different button types -->
<TextButton label="Primary Action" type="primary" onClick={actions.save} />
<TextButton label="Secondary Action" type="secondary" onClick={actions.cancel} />
<TextButton label="Danger Action" type="third" onClick={actions.delete} />

<!-- Different sizes -->
<TextButton label="Large" size="big" onClick={actions.save} />
<TextButton label="Medium" size="medium" onClick={actions.save} />
<TextButton label="Small" size="mini" onClick={actions.save} />

<!-- With custom content -->
<TextButton type="primary" onClick={actions.save}>
  <i class="icon_google_check"></i> Confirm Changes
</TextButton>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `label` | `string` | `''` | Button text label |
| `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` | `MouseClickHandler` | - | Async 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 button size for prominent actions
- **medium**: Standard button size for most use cases
- **mini**: Small button size for compact interfaces

## Use Cases

TextButton component is particularly suitable for:

- Cancel/Confirm actions in dialogs
- Navigation link-style buttons
- Inline action buttons
- Auxiliary actions in forms

## Best Practices

### In Dialog Context

```svelte
<script lang="ts">
  import TextButton from '@ticatec/uniface-element/TextButton';
  
  const handleCancel = async () => {
    closeDialog();
  };
  
  const handleConfirm = async () => {
    await saveChanges();
    closeDialog();
  };
</script>

<div class="dialog-actions">
  <TextButton label="Cancel" type="secondary" onClick={handleCancel} />
  <TextButton label="Confirm" type="primary" onClick={handleConfirm} />
</div>

<style>
  .dialog-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 16px;
  }
</style>
```

### As Inline Actions

```svelte
<div class="content-item">
  <span class="item-text">Project Name</span>
  <div class="item-actions">
    <TextButton label="Edit" type="primary" size="mini" onClick={editItem} />
    <TextButton label="Delete" type="third" size="mini" onClick={deleteItem} />
  </div>
</div>

<style>
  .content-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
  }
  
  .item-actions {
    display: flex;
    gap: 8px;
  }
</style>
```

## API Reference

### MouseClickHandler Type

```typescript
type MouseClickHandler = (event: MouseEvent) => Promise<void>;
```

### Click Throttling

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