react-reusable-button-diludilshad/README.md

A modern, customizable React button component with multiple variants, sizes, and states. Perfect for building consistent UI across your React applications.

# Reusable Button Component

A modern, customizable React button component with multiple variants, sizes, and states. Perfect for building consistent UI across your React applications.

## Features

- 🎨 **Multiple Variants**: Primary, Secondary, Outline, Ghost, Danger, Success
- 📏 **Flexible Sizes**: Small, Medium, Large
- 🔄 **Loading States**: Built-in loading spinner
- ♿ **Accessible**: Full keyboard navigation and screen reader support
- 🌙 **Dark Mode**: Automatic dark mode support
- 📱 **Responsive**: Works great on all screen sizes
- 🎯 **TypeScript Ready**: Full TypeScript support
- 🚀 **Zero Dependencies**: Only requires React

## Installation

```bash
npm install react-reusable-button-diludilshad
```

## Prerequisites

This component requires Tailwind CSS to be installed and configured in your project:

```bash
npm install tailwindcss
```

## Usage

### Basic Usage

```jsx
import { Button } from "react-reusable-button-diludilshad";

function App() {
  return <Button onClick={() => console.log("Clicked!")}>Click me</Button>;
}
```

### Tailwind CSS Setup

Make sure you have Tailwind CSS configured in your project. The component uses Tailwind classes for styling.

### Variants

```jsx
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="success">Success</Button>
```

### Sizes

```jsx
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
```

### States

```jsx
<Button disabled>Disabled</Button>
<Button loading>Loading...</Button>
<Button fullWidth>Full Width</Button>
```

### With Icons

```jsx
<Button>
  <span>🚀</span>
  Launch
</Button>
```

## Props

| Prop        | Type                                                                        | Default     | Description            |
| ----------- | --------------------------------------------------------------------------- | ----------- | ---------------------- |
| `children`  | `ReactNode`                                                                 | -           | Button content         |
| `variant`   | `'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger' \| 'success'` | `'primary'` | Button style variant   |
| `size`      | `'small' \| 'medium' \| 'large'`                                            | `'medium'`  | Button size            |
| `disabled`  | `boolean`                                                                   | `false`     | Disable the button     |
| `loading`   | `boolean`                                                                   | `false`     | Show loading spinner   |
| `fullWidth` | `boolean`                                                                   | `false`     | Make button full width |
| `onClick`   | `(event: MouseEvent) => void`                                               | -           | Click handler          |
| `type`      | `'button' \| 'submit' \| 'reset'`                                           | `'button'`  | Button type            |
| `className` | `string`                                                                    | -           | Additional CSS classes |

## Development

### Setup

```bash
git clone https://github.com/diludilshad/reusable-button.git
cd reusable-button
npm install
```

### Development Server

```bash
npm run dev
```

### Build

```bash
npm run build
```

### Publish

```bash
npm publish
```

## License

MIT © [Diludilshad](https://github.com/diludilshad)