# TextButton Component

A minimalist text-based button component designed for subtle actions, navigation links, and secondary interactions where a full button appearance might be too prominent.

## Features

- **Text-Focused Design**: Clean, minimal appearance emphasizing text content
- **Multiple Types**: Default, primary, secondary, third, and forth button styles
- **Size Options**: Big, medium, and mini sizes
- **Event Handling**: Click, focus, and blur event support
- **Accessibility**: Proper semantic button element with disabled state
- **Debounce Protection**: Built-in click debouncing to prevent rapid firing
- **Custom Styling**: Flexible style customization
- **Slot Support**: Custom content via slots

## Basic Usage

```svelte
<script>
import TextButton from '@ticatec/uniface-element/TextButton';

const handleClick = (event) => {
  console.log('Text button clicked!', event);
};
</script>

<TextButton 
  label="Click Me" 
  onclick={handleClick} 
/>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `disabled` | `boolean` | `false` | Whether the button is disabled |
| `size` | `'big' \| 'medium' \| 'mini'` | `'medium'` | Button size |
| `label` | `string` | `''` | Button text label |
| `type` | `'default' \| 'primary' \| 'secondary' \| 'third' \| 'forth'` | `'default'` | Button type/style |
| `onclick` | `MouseClickHandler` | - | Click event handler |
| `onfocus` | `(event: FocusEvent) => void` | `() => {}` | Focus event handler |
| `onblur` | `(event: FocusEvent) => void` | `() => {}` | Blur event handler |
| `style` | `string` | `''` | Custom CSS styles |

## Button Types

```svelte
<!-- Default text button -->
<TextButton label="Default" type="default" onclick={handleClick} />

<!-- Primary text button -->
<TextButton label="Primary" type="primary" onclick={handleClick} />

<!-- Secondary text button -->
<TextButton label="Secondary" type="secondary" onclick={handleClick} />

<!-- Third level text button -->
<TextButton label="Third" type="third" onclick={handleClick} />

<!-- Fourth level text button -->
<TextButton label="Fourth" type="forth" onclick={handleClick} />
```

## Button Sizes

```svelte
<!-- Mini text button -->
<TextButton label="Mini" size="mini" onclick={handleClick} />

<!-- Medium text button (default) -->
<TextButton label="Medium" size="medium" onclick={handleClick} />

<!-- Big text button -->
<TextButton label="Big" size="big" onclick={handleClick} />
```

## Common Use Cases

### Navigation Links

```svelte
<nav class="breadcrumb">
  <TextButton label="Home" onclick={() => goto('/')} />
  <span class="separator">›</span>
  <TextButton label="Products" onclick={() => goto('/products')} />
  <span class="separator">›</span>
  <span>Current Page</span>
</nav>
```

### Secondary Actions

```svelte
<div class="action-group">
  <Button label="Save" type="primary" onclick={handleSave} />
  <TextButton label="Cancel" onclick={handleCancel} />
  <TextButton label="Save as Draft" onclick={handleSaveDraft} />
</div>
```

### Tab Navigation

```svelte
<script>
let activeTab = 'overview';

const switchTab = (tab) => (event) => {
  activeTab = tab;
};
</script>

<div class="tabs">
  <TextButton 
    label="Overview" 
    type={activeTab === 'overview' ? 'primary' : 'default'}
    onclick={switchTab('overview')} 
  />
  <TextButton 
    label="Details" 
    type={activeTab === 'details' ? 'primary' : 'default'}
    onclick={switchTab('details')} 
  />
  <TextButton 
    label="Reviews" 
    type={activeTab === 'reviews' ? 'primary' : 'default'}
    onclick={switchTab('reviews')} 
  />
</div>
```

### Menu Items

```svelte
<div class="menu">
  <TextButton label="Profile Settings" onclick={openProfile} />
  <TextButton label="Account" onclick={openAccount} />
  <TextButton label="Preferences" onclick={openPreferences} />
  <TextButton label="Log Out" type="secondary" onclick={logout} />
</div>
```

## Event Handling

```svelte
<script>
const handleClick = (event) => {
  console.log('Text button clicked:', event);
};

const handleFocus = (event) => {
  console.log('Text button focused:', event);
  // Show additional context or highlight
};

const handleBlur = (event) => {
  console.log('Text button blurred:', event);
  // Remove highlight or context
};
</script>

<TextButton 
  label="Interactive Text"
  onclick={handleClick}
  onfocus={handleFocus}
  onblur={handleBlur}
/>
```

## Disabled State

```svelte
<TextButton 
  label="Disabled Action" 
  disabled={true}
  onclick={handleClick} 
/>
```

## Custom Styling

```svelte
<TextButton 
  label="Custom Styled"
  style="
    color: #007acc;
    text-decoration: underline;
    font-weight: bold;
    padding: 4px 8px;
  "
  onclick={handleClick}
/>
```

## Slot Usage

```svelte
<!-- Custom content instead of label -->
<TextButton onclick={handleCustomAction}>
  <span class="custom-text">
    <i class="fas fa-arrow-right"></i>
    Learn More
  </span>
</TextButton>

<!-- Rich content -->
<TextButton onclick={handleRichAction}>
  <div class="rich-content">
    <strong>Advanced Options</strong>
    <small>Configure detailed settings</small>
  </div>
</TextButton>
```

## Advanced Examples

### Conditional Text Button

```svelte
<script>
let isEditing = false;

const toggleEdit = (event) => {
  isEditing = !isEditing;
};
</script>

<TextButton 
  label={isEditing ? "Save Changes" : "Edit"}
  type={isEditing ? "primary" : "default"}
  onclick={toggleEdit}
/>
```

### Link-Style Button

```svelte
<TextButton 
  label="Visit our website"
  style="
    color: #007acc;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
  "
  onclick={() => window.open('https://example.com', '_blank')}
/>
```

### Expandable Section

```svelte
<script>
let isExpanded = false;

const toggleSection = (event) => {
  isExpanded = !isExpanded;
};
</script>

<div class="expandable-section">
  <TextButton 
    label={isExpanded ? "Show Less ▲" : "Show More ▼"}
    onclick={toggleSection}
  />
  
  {#if isExpanded}
    <div class="expanded-content">
      <p>Additional content goes here...</p>
    </div>
  {/if}
</div>
```

### Pagination Controls

```svelte
<script>
let currentPage = 1;
let totalPages = 10;

const goToPage = (page) => (event) => {
  if (page >= 1 && page <= totalPages) {
    currentPage = page;
  }
};
</script>

<div class="pagination">
  <TextButton 
    label="Previous"
    disabled={currentPage === 1}
    onclick={goToPage(currentPage - 1)}
  />
  
  <span class="page-info">Page {currentPage} of {totalPages}</span>
  
  <TextButton 
    label="Next"
    disabled={currentPage === totalPages}
    onclick={goToPage(currentPage + 1)}
  />
</div>
```

### Filter Options

```svelte
<script>
let activeFilters = new Set();

const toggleFilter = (filter) => (event) => {
  if (activeFilters.has(filter)) {
    activeFilters.delete(filter);
  } else {
    activeFilters.add(filter);
  }
  activeFilters = activeFilters; // Trigger reactivity
};
</script>

<div class="filters">
  <TextButton 
    label="All"
    type={activeFilters.size === 0 ? 'primary' : 'default'}
    onclick={() => activeFilters = new Set()}
  />
  <TextButton 
    label="Active"
    type={activeFilters.has('active') ? 'primary' : 'default'}
    onclick={toggleFilter('active')}
  />
  <TextButton 
    label="Completed"
    type={activeFilters.has('completed') ? 'primary' : 'default'}
    onclick={toggleFilter('completed')}
  />
</div>
```

### Form Actions

```svelte
<div class="form-actions">
  <Button label="Submit" type="primary" onclick={handleSubmit} />
  
  <div class="secondary-actions">
    <TextButton label="Save as Draft" onclick={saveDraft} />
    <TextButton label="Preview" onclick={showPreview} />
    <TextButton label="Reset" type="secondary" onclick={resetForm} />
  </div>
</div>

<style>
  .form-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .secondary-actions {
    display: flex;
    gap: 16px;
  }
</style>
```

### Dropdown Menu Trigger

```svelte
<script>
let showDropdown = false;

const toggleDropdown = (event) => {
  showDropdown = !showDropdown;
};
</script>

<div class="dropdown-container">
  <TextButton 
    label="Options ▼"
    type={showDropdown ? 'primary' : 'default'}
    onclick={toggleDropdown}
  />
  
  {#if showDropdown}
    <div class="dropdown-menu">
      <TextButton label="Option 1" onclick={selectOption1} />
      <TextButton label="Option 2" onclick={selectOption2} />
      <TextButton label="Option 3" onclick={selectOption3} />
    </div>
  {/if}
</div>
```

## Accessibility

The TextButton component follows accessibility best practices:

- Uses semantic `<button>` element
- Supports keyboard navigation (Tab, Enter, Space)
- Proper disabled state handling
- Focus and blur events for screen readers

### Improving Accessibility

```svelte
<!-- Provide context for screen readers -->
<TextButton 
  label="Delete"
  onclick={handleDelete}
  style="aria-label: Delete this item permanently"
/>

<!-- Add role and description -->
<TextButton 
  label="Learn More"
  onclick={showDetails}
  style="role: button; aria-describedby: help-text"
/>
<div id="help-text" style="display: none;">
  Opens detailed information about this feature
</div>
```

## Styling

The component uses the following CSS classes:

- `.uniface-button` - Base button class
- `.text-button` - Text button specific styling
- `.{size}` - Size-specific styles (big, medium, mini)
- `.{type}` - Type-specific styles (default, primary, etc.)
- `.disabled` - Disabled state styles

### Example CSS

```css
.uniface-button.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.uniface-button.text-button:hover:not(.disabled) {
  background: rgba(0, 0, 0, 0.05);
  text-decoration: underline;
}

.uniface-button.text-button:focus {
  outline: 2px solid #007acc;
  outline-offset: 2px;
}

.uniface-button.text-button.primary {
  color: #007acc;
  font-weight: 500;
}

.uniface-button.text-button.secondary {
  color: #666;
}

.uniface-button.text-button.big {
  padding: 8px 12px;
  font-size: 16px;
}

.uniface-button.text-button.mini {
  padding: 2px 4px;
  font-size: 12px;
}

.uniface-button.text-button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
```

## Best Practices

1. **Appropriate Context**: Use text buttons for secondary actions and navigation
2. **Clear Labels**: Provide descriptive labels that clearly indicate the action
3. **Visual Hierarchy**: Use different types to establish proper visual hierarchy
4. **Consistent Spacing**: Maintain consistent spacing between text buttons
5. **Hover States**: Ensure hover states provide clear feedback
6. **Accessibility**: Always consider keyboard navigation and screen readers
7. **Context Awareness**: Ensure text buttons work well within their surrounding context

## Common Patterns

### Inline Actions

```svelte
<p>
  Your changes have been saved.
  <TextButton label="Undo" onclick={undoChanges} />
</p>
```

### Card Actions

```svelte
<div class="card">
  <h3>Article Title</h3>
  <p>Article excerpt...</p>
  
  <div class="card-actions">
    <TextButton label="Read More" type="primary" onclick={readMore} />
    <TextButton label="Share" onclick={shareArticle} />
    <TextButton label="Save" onclick={saveArticle} />
  </div>
</div>
```

### List Item Actions

```svelte
<div class="list-item">
  <span class="item-name">Document.pdf</span>
  <div class="item-actions">
    <TextButton label="Download" onclick={download} />
    <TextButton label="Share" onclick={share} />
    <TextButton label="Delete" type="secondary" onclick={deleteFile} />
  </div>
</div>
```

## Integration with Other Components

```svelte
<!-- With modals -->
<Modal bind:open={showModal}>
  <h2>Confirm Action</h2>
  <p>Are you sure you want to continue?</p>
  
  <div class="modal-actions">
    <Button label="Confirm" type="primary" onclick={confirm} />
    <TextButton label="Cancel" onclick={() => showModal = false} />
  </div>
</Modal>

<!-- With tooltips -->
<Tooltip text="This action cannot be undone">
  <TextButton label="Delete All" type="secondary" onclick={deleteAll} />
</Tooltip>
```

## Browser Support

The TextButton component works in all modern browsers that support:
- ES6+ JavaScript
- CSS Flexbox
- Semantic button elements

## Performance

- Minimal styling for fast rendering
- Built-in click debouncing
- Efficient event handling
- Lightweight DOM structure