@shakibdshy/react-button-pro/README.md

A flexible and feature-rich button component for React

# React Button Pro

A fully accessible, customizable React button component with ripple effect, loading state, and modern styling.

[![npm version](https://img.shields.io/npm/v/@shakibdshy/react-button-pro.svg)](https://www.npmjs.com/package/@shakibdshy/react-button-pro)
[![npm downloads](https://img.shields.io/npm/dm/@shakibdshy/react-button-pro.svg)](https://www.npmjs.com/package/@shakibdshy/react-button-pro)
[![License](https://img.shields.io/npm/l/@shakibdshy/react-button-pro.svg)](https://github.com/yourusername/react-button-pro/blob/main/LICENSE)

## Installation

```bash
npm install @shakibdshy/react-button-pro

# or

pnpm add @shakibdshy/react-button-pro

# or

bun add @shakibdshy/react-button-pro
```

## Setup

### Configure Tailwind CSS

Add the button plugin to your `tailwind.config.js` or `tailwind.config.ts`:

```js
import themePlugin from "@shakibdshy/tailwind-theme";

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ... your content configuration
    "node_modules/@shakibdshy/tailwind-theme/dist/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@shakibdshy/react-button-pro/dist/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  plugins: [
    themePlugin,
    // ... other plugins
  ],
};
```

The plugin automatically includes:
- All color variables and configurations
- Typography scales
- Gradient configurations
- Drop shadow utilities
- Animation keyframes
- Dark mode support

## Basic Usage

```jsx
import React from "react";
import { Button } from "@shakibdshy/react-button-pro";

function App() {
  return (
    <div>
      <Button color="primary" size="md">
        Click Me
      </Button>
    </div>
  );
}
export default App;
```

## Props

### Basic Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `color` | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'neutral'` | `'primary'` | Button color variant |
| `size` | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | `'md'` | Button size variant |
| `variant` | `'primary' \| 'outline' \| 'flat' \| 'light' \| 'ghost' \| 'text'` | `'primary'` | Button style variant |
| `rounded` | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full' \| 'none'` | `'lg'` | Border radius variant |
| `isLoading` | `boolean` | `false` | Shows loading spinner |
| `isDisabled` | `boolean` | `false` | Disables the button |
| `hasRipple` | `boolean` | `true` | Enables ripple effect |

### Advanced Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `spinner` | `ReactNode` | `undefined` | Custom loading spinner |
| `spinnerColor` | `string` | `currentColor` | Loading spinner color |
| `rippleColor` | `string` | `rgba(255, 255, 255, 0.35)` | Ripple effect color |
| `rippleDuration` | `number` | `850` | Ripple animation duration (ms) |

## Examples

### Color Variants

```jsx
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="success">Success</Button>
<Button color="warning">Warning</Button>
<Button color="error">Error</Button>
<Button color="info">Info</Button>
<Button color="neutral">Neutral</Button>
```

### Style Variants

```jsx
<Button variant="primary">Primary</Button>
<Button variant="outline">Outline</Button>
<Button variant="flat">Flat</Button>
<Button variant="light">Light</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="text">Text</Button>
```

### Sizes

```jsx
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
<Button size="2xl">2X Large</Button>
```

### Loading State

```jsx
<Button isLoading>Loading</Button>
<Button isLoading spinner={<CustomSpinner />}>Custom Spinner</Button>
```

### Ripple Effect

```jsx
<Button hasRipple>Default Ripple</Button>
<Button hasRipple rippleColor="rgba(0, 255, 0, 0.3)">Custom Ripple</Button>
<Button hasRipple={false}>No Ripple</Button>
```

## Features

### Core Features

- ✨ Modern, lightweight button component
- 🔄 Controlled & Uncontrolled modes support
- 👥 Button group for managing multiple buttons
- 🎭 Customizable ripple effect
- ⌨️ Full keyboard navigation support
- 🎨 CSS-in-JS with Tailwind variants

### Styling & Customization

- 🎨 Multiple built-in color variants
  - Primary, Secondary, Success, Warning, Error, Info, Neutral
- 📐 Five size variants (sm, md, lg, xl, 2xl)
- 🔲 Configurable border radius
- 💅 Works with both Tailwind CSS and custom CSS
- 🎯 Custom styles without breaking accessibility

### Accessibility & UX

- ♿️ WAI-ARIA compliant
- 🔍 Screen reader friendly
- 🎯 Focus management and indicators
- 📱 Responsive and touch-friendly
- 🖱️ Click area optimization
- 🔄 Smooth transitions

### Developer Experience

- 📝 Written in TypeScript with full type definitions
- 🏃‍♂️ Tree-shakeable and optimized bundle
- 📚 Comprehensive documentation and examples
- 🔧 Easy to integrate and customize
- 🎁 Zero external runtime dependencies
- 📦 Small bundle size
- 🔍 Source maps included

## Dark Mode Support

The button component automatically supports dark mode when you enable it in your Tailwind configuration. To enable dark mode:

1. Add the dark mode configuration to your `tailwind.config.js`:
```js
darkMode: ["class", '[data-theme="dark"]']
```

2. Add the dark mode class or data attribute to your HTML:
```html
<!-- Using class -->
<html class="dark">

<!-- Or using data attribute -->
<html data-theme="dark">
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT © [Md. Habibur Rahman](https://github.com/shakibdshy)