A reusable, customizable, and accessible button component for React applications. Supports multiple variants, loading states, and icons.

📦 Installation

``
npm install @bikiran/button

or

yarn add @bikiran/button
`

Compatibility:

- React 16.8+
- TypeScript (optional)

🚀 Usage

$3

`
import { Button } from "bik-button";

const App = () => (
title="Click Me"
onClick={() => alert("Button Clicked")}
/>
);
`

$3

- Variants: Primary, secondary, colored, and outlined styles.
- States: Loading spinner and disabled modes.
- Customizable: Extend with CSS classes or inline icons.

🎨 Examples with Code

$3

`
Solid
Bordered
Outlined
`

$3

`

🌱 Plant Tree

`

$3

`

Processing...

`

Preview

!Button Variants Preview
_Caption: All available button styles._

📝 Props Reference

| Prop | Type | Default | Description |
| --------- | -------------------- | --------- | -------------------- |
| variant | TVariant (see below) | "primary" | Button style |
| loading | boolean | false | Shows spinner |
| disabled | boolean | false | Disables interaction |
| className | string | "" | Custom CSS classes |

$3

"primary", "primary-line", "secondary", "secondary-line", "secondary-line-bordered", "blue", "blue-line", "blue-line-bordered", "red", "red-line", "red-line-bordered", "pink", "pink-outline", "pink-outline-bordered", "green","green-outline" "gray", "yellow-outline"

🛠 Customization

$3

`
className="px-8 py-3 rounded-full font-bold shadow-lg"
variant="primary"
>
Big Rounded Button

`

$3

Override in your global CSS:

`
:root {
--primary: #8b5cf6; / Example: Change primary color /
}
`

🤝 Contribution Guide

1. Clone repo:

`
git clone https://github.com/your-repo/bik-button.git
``

2. Add new variants in cName() function

3. Test changes in Storybook (if available)

4. Submit PR with:

- TypeScript types for new props

- Storybook examples (if applicable)

📜 License

This project is licensed under the MIT License.

👨‍💻 Author

Developed by Bikiran. Feel Free to contribute!