A simple and reusable React button component library
npm install @bikiran/button





A reusable, customizable, and accessible button component for React applications. Supports multiple variants, loading states, and icons.
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
`
`
$3
`
`
$3
`
`
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
``