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

npm install react-reusable-button-diludilshad

Prerequisites

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

npm install tailwindcss

Usage

Basic Usage

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

<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

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

States

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

With Icons

<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

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

Development Server

npm run dev

Build

npm run build

Publish

npm publish

License

MIT © Diludilshad