@shakibdshy/react-button-pro

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