<!-- source-hash: cdf56d600d330b114e8fb5c69c27907c -->
A customizable chevron button component built with React and Lucide icons that supports dynamic direction, expandable states, and multiple sizing options with optional custom styling.

## Key Components

- **`ChevronButton`** - Main React component that renders a button with chevron icons from Lucide React
- **`ChevronButtonProps`** - TypeScript interface extending button HTML attributes with chevron-specific props
- **Size variants** - Three predefined sizes (sm, md, lg) with corresponding icon dimensions
- **Direction control** - Supports 'up' and 'down' chevron orientations with expandable state logic

## Usage Example

```typescript
import { ChevronButton } from './chevron-button'

// Basic usage with default down chevron
<ChevronButton onClick={() => console.log('clicked')} />

// Expandable dropdown with state control
<ChevronButton 
  isExpanded={isOpen}
  onClick={() => setIsOpen(!isOpen)}
  size="lg"
/>

// Custom styled chevron button
<ChevronButton
  direction="up"
  size="sm"
  backgroundColor="#f3f4f6"
  borderColor="#d1d5db"
  className="hover:bg-gray-200"
/>

// Form integration
<ChevronButton
  type="submit"
  disabled={isLoading}
  isExpanded={showDetails}
/>
```

The component intelligently selects the chevron direction based on either the `isExpanded` prop (taking precedence) or the `direction` prop, making it ideal for collapsible sections, dropdowns, and accordion interfaces.