Flexi Button

A highly customizable button component for Angular

Live Demo


Features

- Supports text, icon, or both
- Integration with Google Material Symbols for icons
- Customizable size, color, and rounded corners
- Built-in loading state

Installation

Install the package using npm
``bash
npm i flexi-button
`

Usage

#### 1. Button with Text
Examples
`html














`

#### 2. Button with Icon
You can use any icon from Google Material Symbols.
`html

`

#### 3. Button with Icon and Text
Combine text and an icon in the same button
`html

`

#### 4. Rounded Button
Make the button corners rounded
`html

`

#### 4. Button with Loading State
Display a loading spinner instead of the button's content
`html

`

Inputs Reference

| Input Name | Type | Description |
|-----------------|---------|---------------------------------------------------------------------------------------------|
| btnColor | string | Button color. Available values: light, primary, success, danger, warning, info, dark, indigo, purple, pink, teal, yellow, secondary, black, white. |
| btnSize | string | Button size (e.g., small, medium, large). |
| btnText | string | Text displayed on the button (use title for tooltip functionality instead). |
| btnIcon | string | Icon name from Google Material Symbols. |
| title | string | Text displayed on the button as a tooltip instead of btnText. |
| btnRounded | boolean | Whether the button should have rounded corners. |
| flexiToolTip | string | Tooltip text displayed when hovering over the button. |
| loading | boolean | Displays a loading spinner if set to true`. |