React Button Component Library

A simple, elegant, and accessible React button component library built with TypeScript.

Features

• 🎨 Three variants: Primary, Secondary, and Danger
• 📏 Three sizes: Small, Medium, and Large
• ♿ Accessible: Built with accessibility in mind
• 🔧 TypeScript: Full TypeScript support with proper type definitions
• 🎯 Lightweight: Minimal dependencies
• 🔄 Flexible: Extends native button props

Installation

npm install react-button-component-library

Usage

import React from 'react';
import { Button } from 'react-button-component-library';

function App() {
  return (
    <div>
      <Button variant="primary" size="medium">
        Click me!
      </Button>
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'secondary' \| 'danger' | 'primary' | Button style variant | | size | 'small' \| 'medium' \| 'large' | 'medium' | Button size | | children | React.ReactNode | - | Button content | | disabled | boolean | false | Whether the button is disabled | | className | string | '' | Additional CSS classes |

The component also accepts all standard HTML button attributes.

Examples

Variants

<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="danger">Danger Button</Button>

Sizes

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

With Click Handler

<Button 
  variant="primary" 
  onClick={() => console.log('Button clicked!')}
>
  Click Me
</Button>

Disabled State

<Button disabled>Disabled Button</Button>

Custom Styling

<Button 
  variant="primary" 
  className="my-custom-class"
>
  Custom Styled Button
</Button>

Development

To run the development server:

npm run dev

To build the library:

npm run build

To publish:

npm publish

Peer Dependencies

This library requires React 18.3.1 as a peer dependency:

{
  "peerDependencies": {
    "react": "18.3.1",
    "react-dom": "18.3.1"
  }
}

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.