1.0.7 • Published 6 months ago
@shakibdshy/react-button-pro v1.0.7
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-proSetup
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:
- Add the dark mode configuration to your
tailwind.config.js:
darkMode: ["class", '[data-theme="dark"]']- 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