# SortableTrigger

## Description

A trigger component that initiates drag-and-drop functionality for sortable list items. It provides a dedicated draggable handle with proper visual feedback and accessibility features, allowing users to easily identify and interact with sortable elements.

## Aliases

- SortableTrigger
- DragHandle
- DragTrigger
- SortHandle

## Props Breakdown

**Extends:** Standard HTML button attributes

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `children` | `ReactNode` | - | No | Content to display within the trigger (usually an icon) |
| `className` | `string` | - | No | Additional CSS class names |
| `disabled` | `boolean` | `false` | No | Whether the drag trigger is disabled |
| `onDragStart` | `(event: DragEvent) => void` | - | No | Callback fired when drag starts |

## Examples

### Basic Drag Handle
```tsx
import { SortableTrigger, Icon } from '@delightui/components';

function BasicTriggerExample() {
  return (
    <div className="sortable-item">
      <SortableTrigger>
        <Icon icon="DragHandle" size="Small" />
      </SortableTrigger>
      <span>Draggable content</span>
    </div>
  );
}
```

### Custom Styled Trigger
```tsx
function CustomStyledTriggerExample() {
  return (
    <div className="task-item">
      <SortableTrigger className="custom-drag-handle">
        ⋮⋮
      </SortableTrigger>
      
      <div className="task-content">
        <h4>Task Title</h4>
        <p>Task description</p>
      </div>
    </div>
  );
}
```

### Conditional Trigger
```tsx
function ConditionalTriggerExample() {
  const [canReorder, setCanReorder] = useState(true);

  return (
    <div className="item-with-conditional-trigger">
      <SortableTrigger disabled={!canReorder}>
        <Icon icon="DragHandle" size="Small" />
      </SortableTrigger>
      
      <div className="item-content">
        Content that can be reordered
      </div>
      
      <button onClick={() => setCanReorder(!canReorder)}>
        {canReorder ? 'Disable' : 'Enable'} Reordering
      </button>
    </div>
  );
}
```