@ticatec/uniface-element 0.2.0 → 0.2.2

package/docs/buttons/en/TextButton.md

@@ -0,0 +1,163 @@
+# 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.