React Button Pro

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

Installation

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:

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

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

<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

<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

<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

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

Ripple Effect

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

darkMode: ["class", '[data-theme="dark"]']

2. Add the dark mode class or data attribute to your 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