React Button Factory

A highly customizable React button component built with Factory Pattern and Abstraction.


Important: Tailwind CSS Required

This package uses Tailwind CSS for styling. You must have Tailwind configured in your project!

Installation

``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 (

Click Me

);
}
`

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
Primary
Secondary
Danger
Success
Outline
`

$3

`tsx
Small
Medium
Large
`

$3

`tsx
Square
Rounded
Pill
`

$3

`tsx
} iconPosition="left">
Save

} iconPosition="right">
Delete

`

$3


`tsx

Saving...

`

$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',
],
}
``

Architecture

Built with:
- Factory Pattern for flexible creation
- Abstraction for easy extension
- TypeScript for type safety
- Tailwind CSS for styling

License

MIT

Author

abhimanew (demonslayer2000f@gmail.com)

Links

- NPM Package

---

Made with using Factory Pattern + Abstraction