lumina-button/README.md

A beautiful, highly customizable React button component with gradient effects, animations, hover effects, and extensive styling options. Perfect for modern web applications that need visually appealing UI elements.

# 🌟 LuminaButton

A beautiful, highly customizable React button component with gradient effects, animations, hover effects, and extensive styling options. Perfect for modern web applications that need visually appealing UI elements.

## ✨ Features

- **🎨 Multiple Variants**: Primary, secondary, success, warning, danger, info, light, dark, link, and ghost
- **🌈 Gradient Backgrounds**: 15+ stunning gradient combinations
- **🎭 Animations**: Pulse, wave, and bounce effects
- **🖱️ Hover Effects**: Fill, scale, shadow, glow, wave, and fade transitions
- **📏 Sizes**: Small, medium, and large options
- **🔲 Outline Mode**: Transparent background with colored borders
- **⭕ Rounded Corners**: 6 different rounding options from none to full circle
- **✨ Glow Effects**: Subtle shadow glows
- **⏳ Loading States**: Built-in loading spinner
- **🎯 Icons Support**: Left and right icon placement
- **📱 Responsive**: Full-width option available
- **🎨 Custom Colors**: Support for custom color and background-color overrides

## 📦 Installation

```bash
npm install lumina-button
```

## 🚀 Quick Start

```jsx
import React from 'react';
import LuminaButton from 'lumina-button';

function App() {
  return (
    <div>
      <LuminaButton 
        label="Click Me" 
        variant="primary" 
        onClick={() => console.log('Button clicked!')}
      />
    </div>
  );
}

export default App;
```

## 📖 API Reference

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | `"Button"` | Button text content |
| `onClick` | `function` | - | Click handler function |
| `type` | `"button"`, `"submit"`, `"reset"` | `"button"` | HTML button type |
| `disabled` | `boolean` | `false` | Disable the button |
| `className` | `string` | `""` | Additional CSS classes |
| `variant` | `ButtonVariant` | `"primary"` | Button style variant |
| `size` | `"small"`, `"medium"`, `"large"` | `"medium"` | Button size |
| `color` | `string` | - | Custom text color (CSS color value) |
| `backgroundColor` | `string` | - | Custom background color (CSS color value) |
| `rounded` | `RoundedSize` | `"md"` | Border radius size |
| `leftIcon` | `ReactNode` | - | Icon displayed on the left |
| `rightIcon` | `ReactNode` | - | Icon displayed on the right |
| `loading` | `boolean` | `false` | Show loading spinner |
| `glow` | `boolean` | `false` | Add glow effect |
| `gradient` | `GradientVariant` | `""` | Gradient background variant |
| `animation` | `AnimationType` | - | Animation type |
| `fullWidth` | `boolean` | `false` | Make button full width |
| `outline` | `boolean` | `false` | Use outline style |
| `hoverEffect` | `HoverEffect` | `""` | Hover effect type |
| `shadow` | `ShadowSize` | `""` | Shadow size |

### Variant Types

```typescript
type ButtonVariant = 
  | "primary"     // Indigo background
  | "secondary"   // Gray background  
  | "success"     // Green background
  | "warning"     // Yellow background
  | "danger"      // Red background
  | "info"        // Blue background
  | "light"       // Light gray background
  | "dark"        // Dark background
  | "link"        // Text-only style
  | "ghost";      // Transparent with color

type GradientVariant =
  | "indigo"      // Indigo → Purple → Pink
  | "blue"        // Blue → Cyan
  | "green"       // Green → Lime
  | "orange"      // Orange → Red
  | "pink"        // Pink → Rose
  | "dark"        // Dark → Purple
  | "aqua"        // Aqua → Teal → Emerald
  | "sunset"      // Yellow → Amber → Orange
  | "violet"      // Purple → Violet → Indigo
  | "rose"        // Red → Pink → Purple
  | "neon"        // Neon Cyan → Purple → Pink
  | "silver"      // Black → Gray → Silver
  | "earth"       // Brown → Amber → Yellow
  | "rainbow";    // Full rainbow spectrum
```

## 🎯 Examples

### Basic Usage
```jsx
<LuminaButton label="Primary Button" variant="primary" />
<LuminaButton label="Success Button" variant="success" />
<LuminaButton label="Warning Button" variant="warning" />
```

### Gradient Buttons
```jsx
<LuminaButton label="Indigo Gradient" gradient="indigo" />
<LuminaButton label="Sunset Gradient" gradient="sunset" />
<LuminaButton label="Rainbow Gradient" gradient="rainbow" />
```

### With Icons
```jsx
<LuminaButton 
  label="Download" 
  variant="primary" 
  leftIcon={<DownloadIcon />} 
/>
<LuminaButton 
  label="Continue" 
  variant="success" 
  rightIcon={<ArrowRightIcon />} 
/>
```

### Outline Buttons
```jsx
<LuminaButton label="Outline Primary" variant="primary" outline />
<LuminaButton label="Outline Success" variant="success" outline />
<LuminaButton label="Gradient Outline" gradient="indigo" outline />
```

### Loading State
```jsx
<LuminaButton 
  label="Processing..." 
  variant="primary" 
  loading={true} 
/>
```

### Custom Styling
```jsx
<LuminaButton 
  label="Custom Button" 
  color="#ffffff" 
  backgroundColor="#ff6b6b"
  rounded="xl"
  glow={true}
  hoverEffect="scale"
/>
```

### Full Width
```jsx
<LuminaButton 
  label="Full Width Button" 
  variant="primary" 
  fullWidth 
/>
```

### With Animation
```jsx
<LuminaButton 
  label="Pulse Button" 
  variant="primary" 
  animation="pulse" 
/>
<LuminaButton 
  label="Wave on Hover" 
  variant="success" 
  hoverEffect="wave" 
/>
```

## 🎨 Customization

### Custom Colors
```jsx
// Custom text and background colors
<LuminaButton 
  label="Custom Colors" 
  color="#ffffff" 
  backgroundColor="#4a90e2" 
/>

// Using CSS variables
<LuminaButton 
  label="CSS Variables" 
  color="var(--primary-color)" 
  backgroundColor="var(--secondary-color)" 
/>
```

### Combining Effects
```jsx
<LuminaButton 
  label="Premium Button"
  gradient="violet"
  glow={true}
  rounded="full"
  hoverEffect="fill"
  animation="pulse"
  size="large"
/>
```

## 🔧 Browser Support

LuminaButton supports all modern browsers including:
- Chrome (60+)
- Firefox (60+)
- Safari (12+)
- Edge (79+)

## 📋 Dependencies

- React 18.0.0 or higher
- React DOM 18.0.0 or higher

---

**LuminaButton** - Light up your UI with beautiful, customizable buttons! ✨