🌟 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

npm install lumina-button

🚀 Quick Start

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

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

<LuminaButton label="Primary Button" variant="primary" />
<LuminaButton label="Success Button" variant="success" />
<LuminaButton label="Warning Button" variant="warning" />

Gradient Buttons

<LuminaButton label="Indigo Gradient" gradient="indigo" />
<LuminaButton label="Sunset Gradient" gradient="sunset" />
<LuminaButton label="Rainbow Gradient" gradient="rainbow" />

With Icons

<LuminaButton 
  label="Download" 
  variant="primary" 
  leftIcon={<DownloadIcon />} 
/>
<LuminaButton 
  label="Continue" 
  variant="success" 
  rightIcon={<ArrowRightIcon />} 
/>

Outline Buttons

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

Loading State

<LuminaButton 
  label="Processing..." 
  variant="primary" 
  loading={true} 
/>

Custom Styling

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

Full Width

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

With Animation

<LuminaButton 
  label="Pulse Button" 
  variant="primary" 
  animation="pulse" 
/>
<LuminaButton 
  label="Wave on Hover" 
  variant="success" 
  hoverEffect="wave" 
/>

🎨 Customization

Custom Colors

// 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

<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! ✨