npm package: @naveenkumarp/custombutton
Description: A flexible, reusable Angular standalone button component built for scalable UI systems.
Latest version: 0.0.21

# 🚀 Custom Button Library

A flexible, reusable Angular standalone button component built for scalable UI systems.

---

## ✨ Features

* 🎨 Variants: `primary`, `secondary`, `success`, `danger`, `warning`
* 📏 Sizes: `sm`, `md`, `lg`
* 🎭 Appearances: `fill`, `outline`, `clear`, `underline`
* 🔘 Icon support (left / right / icon-only)
* ⏳ Loading state (default + custom loader)
* 📦 Full-width button support
* 🎯 Accessible (`aria-label`, proper button types)
* 🎨 Fully customizable via CSS variables
* ⚡ Standalone Angular component (no dependencies)

---

## 📦 Installation

```bash
npm install @your-username/custombutton
```

---

## ⚡ Usage

### Import Component

```ts
import { CustomButtonComponent } from '@your-username/custombutton';

@Component({
  standalone: true,
  imports: [CustomButtonComponent],
})
export class AppComponent {}
```

---

## 🧪 Examples

### ✅ Basic Button

```html
<lib-custombutton label="Save"></lib-custombutton>
```

---

### 🎯 With Icons

```html
<lib-custombutton label="Save">
  <span left>💾</span>
  <span right>➡️</span>
</lib-custombutton>
```

---

### 🔵 Variants

```html
<lib-custombutton label="Primary" variant="primary"></lib-custombutton>
<lib-custombutton label="Success" variant="success"></lib-custombutton>
<lib-custombutton label="Danger" variant="danger"></lib-custombutton>
<lib-custombutton label="Warning" variant="warning"></lib-custombutton>
```

---

### 📏 Sizes

```html
<lib-custombutton label="Small" size="sm"></lib-custombutton>
<lib-custombutton label="Medium" size="md"></lib-custombutton>
<lib-custombutton label="Large" size="lg"></lib-custombutton>
```

---

### 🎭 Appearances

```html
<lib-custombutton label="Fill"></lib-custombutton>
<lib-custombutton label="Outline" appearance="outline"></lib-custombutton>
<lib-custombutton label="Clear" appearance="clear"></lib-custombutton>
<lib-custombutton label="Link" appearance="underline"></lib-custombutton>
```

---

### 🎯 Icon Only

```html
<lib-custombutton [iconOnly]="true" ariaLabel="Next">
  ➡️
</lib-custombutton>
```

---

### ⏳ Loading State

```html
<lib-custombutton [loading]="true"></lib-custombutton>
```

---

### 🔧 Custom Loader

```html
<lib-custombutton [loading]="true">
  <span loading>Loading...</span>
</lib-custombutton>
```

---

### 📦 Full Width

```html
<lib-custombutton label="Full Width" [fullWidth]="true"></lib-custombutton>
```

---

### 🖱 Click Event

```html
<lib-custombutton 
  label="Click Me" 
  (btnClick)="handleClick($event)">
</lib-custombutton>
```

---

## 🎨 Custom Styling

Override styles using CSS variables:

```html
<lib-custombutton
  label="Custom Button"
  [customStyles]="{
    '--btn-bg': '#000',
    '--btn-hover-bg': '#333',
    '--btn-color': '#fff',
    '--btn-radius': '20px'
  }">
</lib-custombutton>
```

---

## ⚙️ Inputs

| Input        | Type                                             | Default |
| ------------ | ------------------------------------------------ | ------- |
| label        | string                                           | ''      |
| variant      | primary | secondary | success | danger | warning | primary |
| size         | sm | md | lg                                     | md      |
| appearance   | fill | outline | clear | underline               | fill    |
| disabled     | boolean                                          | false   |
| loading      | boolean                                          | false   |
| fullWidth    | boolean                                          | false   |
| iconOnly     | boolean                                          | false   |
| ariaLabel    | string                                           | ''      |
| type         | button | submit | reset                          | button  |
| customStyles | { [key: string]: string }                        | {}      |

---

## 🎯 CSS Variables

| Variable        | Description       |
| --------------- | ----------------- |
| --btn-bg        | Background color  |
| --btn-hover-bg  | Hover background  |
| --btn-color     | Text color        |
| --btn-border    | Border color      |
| --btn-padding   | Padding           |
| --btn-font-size | Font size         |
| --btn-radius    | Border radius     |
| --spinner-color | Loader color      |
| --spinner-bg    | Loader background |

---

## 🧠 Notes

* Always provide `ariaLabel` for icon-only buttons
* Use `type="button"` to prevent accidental form submits
* Prefer `fill` for primary actions, `outline` for secondary, and `clear/underline` for low-priority actions

---

## 📄 License

MIT