🚀 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

npm install @your-username/custombutton

⚡ Usage

Import Component

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

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

🧪 Examples

✅ Basic Button

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

🎯 With Icons

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

🔵 Variants

<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

<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

<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

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

⏳ Loading State

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

🔧 Custom Loader

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

📦 Full Width

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

🖱 Click Event

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

🎨 Custom Styling

Override styles using CSS variables:

<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