# Button Styling Guide

## Overview
This guide defines the standard button styles and colors to be used across all tables and functionality in the application. All buttons must follow these guidelines for consistency.

## Button Categories by Functionality

### 1. Primary Actions (Blue)
**Use for:** Main actions, creating new items, primary workflows
- **Color:** Blue (`bg-blue-600 hover:bg-blue-700`)
- **Text:** White (`text-white`)
- **Border:** Transparent (`border-transparent`)
- **Examples:** "Add New", "Create", "Save", "Submit"

```html
<button class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
    <svg class="-ml-1 mr-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
    </svg>
    Add New
</button>
```

### 2. Edit Actions (Blue)
**Use for:** Editing existing items, modifying data
- **Color:** Blue background with blue text (`bg-blue-100 text-blue-700 hover:bg-blue-200`)
- **Border:** Transparent (`border-transparent`)
- **Examples:** "Edit", "Modify", "Update"

```html
<a href="{{ route('items.edit', $item) }}" 
   class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
    </svg>
    Edit
</a>
```

### 3. View/Details Actions (Purple)
**Use for:** Viewing details, opening modals, expanding information
- **Color:** Purple (`bg-purple-100 text-purple-700 hover:bg-purple-200`)
- **Border:** Transparent (`border-transparent`)
- **Examples:** "View", "Details", "Show", "Open"

```html
<button wire:click="openViewModal({{ $item->id }})" 
        class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-purple-700 bg-purple-100 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
    </svg>
    View Details
</button>
```

### 4. Interaction/Communication Actions (Green)
**Use for:** Adding interactions, communications, notes
- **Color:** Green (`bg-green-100 text-green-700 hover:bg-green-200`)
- **Border:** Transparent (`border-transparent`)
- **Examples:** "Add Interaction", "Send Message", "Add Note"

```html
<button wire:click="openInteractionModal({{ $item->id }})" 
        class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-green-700 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-3.582 8-8 8a8.001 8.001 0 01-7.292-4.292L3 21l4.708-1.708A8.001 8.001 0 1121 12z"/>
    </svg>
    Add Interaction
</button>
```

### 5. Delete Actions (Red)
**Use for:** Deleting items, removing data
- **Color:** Red (`bg-red-100 text-red-700 hover:bg-red-200`)
- **Border:** Transparent (`border-transparent`)
- **Examples:** "Delete", "Remove", "Trash"

```html
<button wire:click="confirmDelete({{ $item->id }})" 
        class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
    </svg>
    Delete
</button>
```

### 6. Secondary Actions (Gray)
**Use for:** Secondary actions, cancel, close, back
- **Color:** Gray (`bg-gray-100 text-gray-700 hover:bg-gray-200`)
- **Border:** Gray (`border-gray-300`)
- **Examples:** "Cancel", "Close", "Back", "Secondary"

```html
<button wire:click="closeModal" 
        class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
    </svg>
    Cancel
</button>
```

### 7. Success Actions (Green)
**Use for:** Confirming actions, approving, accepting
- **Color:** Green (`bg-green-600 hover:bg-green-700`)
- **Text:** White (`text-white`)
- **Border:** Transparent (`border-transparent`)
- **Examples:** "Confirm", "Approve", "Accept", "Save"

```html
<button wire:click="confirmAction" 
        class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
    <svg class="-ml-1 mr-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
    </svg>
    Confirm
</button>
```

### 8. Warning Actions (Yellow/Orange)
**Use for:** Warning actions, pending items, attention needed
- **Color:** Yellow (`bg-yellow-100 text-yellow-700 hover:bg-yellow-200`)
- **Border:** Transparent (`border-transparent`)
- **Examples:** "Pending", "Warning", "Attention"

```html
<button wire:click="markPending" 
        class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-yellow-700 bg-yellow-100 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500">
    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
    </svg>
    Pending
</button>
```

## Button Sizes

### Small (Table Actions)
```html
class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded"
```

### Medium (Form Actions)
```html
class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md"
```

### Large (Primary Actions)
```html
class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md"
```

## Icon Guidelines

### Icon Size
- **Small buttons:** `w-4 h-4`
- **Medium buttons:** `w-4 h-4` or `w-5 h-5`
- **Large buttons:** `w-5 h-5`

### Icon Positioning
- **Left of text:** `-ml-1 mr-1` or `mr-1`
- **Right of text:** `ml-1 -mr-1` or `ml-1`

## Focus States
All buttons must include focus states:
```html
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[color]-500
```

## Disabled States
```html
disabled class="opacity-50 cursor-not-allowed"
```

## Loading States
```html
wire:loading.attr="disabled" class="opacity-75 cursor-not-allowed"
```

## Implementation Checklist

When implementing buttons, ensure:

1. ✅ **Correct color scheme** for the functionality
2. ✅ **Consistent sizing** within the context
3. ✅ **Proper icons** that match the action
4. ✅ **Focus states** for accessibility
5. ✅ **Loading states** for async actions
6. ✅ **Disabled states** when appropriate
7. ✅ **Hover effects** for better UX
8. ✅ **Consistent spacing** and padding

## Examples by Context

### Table Row Actions
```html
<div class="flex justify-end space-x-2">
    <button wire:click="openViewModal({{ $item->id }})" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-purple-700 bg-purple-100 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
        </svg>
        View
    </button>
    <a href="{{ route('items.edit', $item) }}" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
        </svg>
        Edit
    </a>
    <button wire:click="confirmDelete({{ $item->id }})" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
        </svg>
        Delete
    </button>
</div>
```

### Form Actions
```html
<div class="flex justify-end space-x-3">
    <button type="button" wire:click="cancel" class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
        Cancel
    </button>
    <button type="submit" class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
        <svg class="-ml-1 mr-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
        </svg>
        Save
    </button>
</div>
```

This guide ensures consistent button styling across the entire application.