@codinix/button

A powerful, reusable React <Button /> component styled with Tailwind CSS and designed for modern UI systems.

Supports multiple visual variants, sizes, loading state, icon support, and full accessibility.

---

📦 Installation

npm install @codinix/button

or

yarn add @codinix/button

---

⚙️ Tailwind Configuration (REQUIRED)

To make sure Tailwind includes the button styles, you must extend your Tailwind config to scan the compiled files from this package:

// tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@codinix/button/dist/**/*.{js,ts,jsx,tsx}" // 👈 add this line
  ],
  theme: {
    extend: {}
  },
  plugins: []
};

If you skip this, your button will appear unstyled.

---

🧪 Usage

import { Button } from "@codinix/button";

export default function Example() {
  return (
    <Button variant="primary" onClick={() => alert("Clicked!")}>
      Click me
    </Button>
  );
}

---

🎨 Variants

Variant	Description
primary	Indigo background, white text
secondary	Soft indigo background
neutral	Bordered, minimalist
ghost	Transparent, hover-only styling
white	White background, black text
*-icon	Round, icon-only versions

Examples:

<Button variant="primary-icon" iconLeft={<Icon />} ariaLabel="Like" />
<Button variant="neutral">Submit</Button>

---

📏 Sizes

Size	Description
sm	Small
md	Medium (default)
lg	Large

---

🔄 Props

Prop	Type	Description
variant	"primary" | "ghost" …	Controls visual style
size	"sm" | "md" | "lg"	Controls size
onClick	() => void	Callback on click
loading	boolean	Shows spinner and disables button
disabled	boolean	Disables button
fullWidth	boolean	Makes button stretch to full width
iconLeft	ReactNode	Left icon (before text)
iconRight	ReactNode	Right icon (after text)
ariaLabel	string	Accessible label (used for icon-only)
type	"button" | "submit"	Native type of the button

---

💬 Need Help?

This package is maintained by Cleopatra Ropot.
For private usage and support, please contact the author directly.