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

Basic Example

import { Button } from "bik-button";

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

Key Features

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

🎨 Examples with Code

1. Variants

<Button variant="primary">Solid</Button>
<Button variant="blue-line-bordered">Bordered</Button>
<Button variant="pink-outline">Outlined</Button>

2. Icon Button

   <Button variant="green">
      <span>🌱 Plant Tree</span>
   </Button>

3. Loading State

   <Button loading variant="red">
      Processing...
   </Button>

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 |

All Variants

"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

1. Style Overrides

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

2. Theming with CSS Variables

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

MIT License - see the LICENSE file for details.

👨‍💻 Author

Developed by Bikiran

• 🌐 Website: bikiran.com
• 📧 Email: Contact
• 🐙 GitHub: @bikirandev

Made with ❤️ for the React community

⭐ Star this repo • 🐛 Report Bug • 💡 Request Feature

🏢 About Bikiran

Bikiran is a software development and cloud infrastructure company founded in 2012, headquartered in Khulna, Bangladesh. With 15,000+ clients and over a decade of experience, Bikiran builds and operates a suite of products spanning domain services, cloud hosting, app deployment, workflow automation, and developer tools.

| SL | Topic | Product | Description | | --- | ------------ | -------------------------------------------------------------------- | ------------------------------------------------------- | | 1 | Website | Bikiran | Main platform — Domain, hosting & cloud services | | 2 | Website | Edusoft | Education management software for institutions | | 3 | Website | n8n Clouds | Managed n8n workflow automation hosting | | 4 | Website | Timestamp Zone | Unix timestamp converter & timezone tool | | 5 | Website | PDFpi | Online PDF processing & manipulation tool | | 6 | Website | Blog | Technical articles, guides & tutorials | | 7 | Website | Support | 24/7 customer support portal | | 8 | Website | Probackup | Automated database backup for SQL, PostgreSQL & MongoDB | | 9 | Service | Domain | Domain registration, transfer & DNS management | | 10 | Service | Hosting | Web, app & email hosting on NVMe SSD | | 11 | Service | Email & SMS | Bulk email & SMS notification service | | 12 | npm | Chronopick | Date & time picker React component | | 13 | npm | Rich Editor | WYSIWYG rich text editor for React | | 15 | npm | Button | Reusable React button component library | | 16 | npm | Electron Boilerplate | CLI to scaffold Electron.js project templates | | 17 | NuGet | Bkash | bKash payment gateway integration for .NET | | 18 | NuGet | Bikiran Engine | Core .NET engine library for Bikiran services | | 19 | Open Source | PDFpi | PDF processing tool — open source | | 20 | Open Source | Bikiran Engine | Core .NET engine — open source | | 21 | Open Source | Drive CLI | CLI tool to manage Google Drive from terminal | | 22 | Docker | Pgsql | Docker setup for PostgreSQL | | 23 | Docker | n8n | Docker setup for n8n automation | | 24 | Docker | Pgadmin | Docker setup for pgAdmin | | 25 | Social Media | LinkedIn | Bikiran on LinkedIn | | 26 | Social Media | Facebook | Bikiran on Facebook | | 27 | Social Media | YouTube | Bikiran on YouTube | | 28 | Social Media | FB n8nClouds | n8n Clouds on Facebook |