A highly customizable React button component with Factory Pattern
npm install @abhimanew2000/react-button-factoryA highly customizable React button component built with Factory Pattern and Abstraction.

This package uses Tailwind CSS for styling. You must have Tailwind configured in your project!
bash
npm install @abhimanew2000/react-button-factory
` Tailwind CSS Setup
$3
`bash
npm install -D tailwindcss
npx tailwindcss init
`$3
Update your
tailwind.config.js:
`js
export default {
content: [
"./src/*/.{js,jsx,ts,tsx}",
"./node_modules/@abhimanew2000/react-button-factory/dist/*/.{js,cjs}", // Add this!
],
theme: {
extend: {},
},
plugins: [],
}
`$3
In your main CSS file (e.g.,
src/index.css):
`css
@tailwind base;
@tailwind components;
@tailwind utilities;
`$3
After changing config, restart your dev server:
`bash
npm run dev
` Usage
`tsx
import { Button } from '@abhimanew2000/react-button-factory';function App() {
return (
);
}
` Props
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
variant | 'primary' \| 'secondary' \| 'danger' \| 'success' \| 'outline' | 'primary' | Button color |
| size | 'small' \| 'medium' \| 'large' | 'medium' | Button size |
| shape | 'rounded' \| 'square' \| 'pill' | 'rounded' | Border radius |
| weight | 'light' \| 'normal' \| 'bold' | 'normal' | Font weight |
| shadow | 'none' \| 'small' \| 'medium' \| 'large' | 'none' | Shadow depth |$3
| Prop | Type | Description |
|------|------|-------------|
|
children | ReactNode | Button text/content (required) |
| icon | ReactNode | Icon element |
| iconPosition | 'left' \| 'right' | Icon position |$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
onClick | () => void | - | Click handler |
| disabled | boolean | false | Disabled state |
| loading | boolean | false | Loading state |
| type | 'button' \| 'submit' \| 'reset' | 'button' | HTML button type |
| className | string | '' | Additional classes | Examples
$3
`tsx
`$3
`tsx
`$3
`tsx
`$3
`tsx
} iconPosition="left">
Save
} iconPosition="right">
Delete
`$3
`tsx
`$3
`tsx
variant="danger"
size="large"
shape="pill"
weight="bold"
shadow="large"
>
Delete Account
` Troubleshooting
$3
Problem: Classes present but no colors/styles
Solution:
1. Make sure Tailwind CSS is installed
2. Add package path to
tailwind.config.js content array
3. Restart dev server after config change$3
Problem: Only primary button has color
Solution: Use safelist in your Tailwind config:
`js
export default {
content: ["./src/*/.{js,jsx,ts,tsx}"],
safelist: [
'bg-blue-600', 'bg-gray-600', 'bg-red-600', 'bg-green-600',
'hover:bg-blue-700', 'hover:bg-gray-700', 'hover:bg-red-700', 'hover:bg-green-700',
],
}
``Built with:
- Factory Pattern for flexible creation
- Abstraction for easy extension
- TypeScript for type safety
- Tailwind CSS for styling
MIT
abhimanew (demonslayer2000f@gmail.com)
---
Made with using Factory Pattern + Abstraction