@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.