📦 react-button-maker

A simple and flexible React component for creating fully customizable buttons with optional text overlays. Build buttons your way with complete styling control.

✨ Features

• 🎨 Full Customization — Style buttons and text exactly as you need them
• 🧩 Framework Agnostic — Works seamlessly with Tailwind CSS, styled-components, or plain CSS
• ⚡ Lightweight — Minimal dependencies, maximum performance
• 📝 Flexible Text — Add primary and secondary text labels
• ♻️ Modern React — Built for React 19
• 🎯 Zero Default Styles — You have complete control over appearance
• 📘 TypeScript Support — Full type safety with React.ButtonHTMLAttributes

📦 Installation

Install the package using your preferred package manager:

npm install react-button-maker

yarn add react-button-maker

🚀 Quick Start

Step 1: Import the component

import ButtonMaker from "react-button-maker";

Step 2: Add to your component

<ButtonMaker
  label="Click Me"
  text="Secondary"
  buttonStyle="bg-blue-600 text-white px-4 py-2 rounded"
  textStyle="text-gray-200 text-sm"
  onClick={() => console.log("Clicked")}
/>

📋 Props Reference

| Prop | Type | Required | Description | |------|------|----------|-------------| | label | string | ✓ | Main button text displayed inside the button | | text | string | — | Optional secondary text rendered inline with the button | | buttonStyle | string | — | CSS classes or inline styles for the button element | | textStyle | string | — | CSS classes or inline styles for the optional text element | | onClick | () => void | — | Callback function triggered on button click | | disabled | boolean | — | Disable the button (standard HTML attribute) | | type | "button" \| "submit" \| "reset" | — | Button type (standard HTML attribute) | | ...rest | React.ButtonHTMLAttributes | — | All standard HTML button attributes supported |

💡 Examples

Using Tailwind CSS

Create a polished button with Tailwind utilities:

<ButtonMaker 
  label="Submit"
  text="Now"
  buttonStyle="bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition-colors"
  textStyle="text-yellow-200 ml-2 text-sm"
  onClick={() => alert("Form submitted!")}
/>

Using Plain CSS

Define custom styles in your stylesheet:

<ButtonMaker 
  label="Save"
  text="Changes"
  buttonStyle="custom-btn"
  textStyle="secondary-label"
  onClick={handleSave}
/>

styles.css:

.custom-btn {
  background-color: #333;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.custom-btn:hover {
  background-color: #555;
}

.secondary-label {
  font-size: 12px;
  color: #999;
  margin-left: 8px;
  opacity: 0.9;
}

TypeScript Usage

Full type safety in your React/TypeScript project:

import ButtonMaker from "react-button-maker";

function App() {
  const handleClick = () => {
    console.log("Button clicked!");
  };

  return (
    <ButtonMaker
      label="Click Me"
      buttonStyle="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
      onClick={handleClick}
      disabled={false}
      type="button"
      aria-label="Submit button"
    />
  );
}

export default App;

Advanced: Standard HTML Attributes

Use any standard button HTML attributes:

<ButtonMaker
  label="Delete"
  text="Permanent"
  buttonStyle="bg-red-600 text-white px-6 py-3 rounded"
  onClick={handleDelete}
  disabled={isLoading}
  type="button"
  aria-label="Delete item permanently"
  data-testid="delete-button"
  title="This action cannot be undone"
/>

🛠️ Development

Setup

Clone and install the repository:

git clone https://github.com/Q-Niranjan/react-button-maker
cd react-button-maker
npm install

Build

Build the package for distribution:

npm run build

📄 License

MIT License © 2025

You're free to use this package in personal and commercial projects. See the LICENSE file for details.

🤝 Contributing

We welcome contributions! Feel free to submit issues or pull requests to help improve react-button-maker.