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

npm i flexi-button

Usage

1. Button with Text

Examples

<flexi-button btnColor="primary" title="Print" btnSize="x-small" btnIcon="print" />
<flexi-button btnColor="primary" title="Print" btnSize="small" btnIcon="print" />
<flexi-button btnColor="primary" title="Print" btnSize="medium" btnIcon="print" />
<flexi-button btnColor="primary" title="Print" btnSize="large" btnIcon="print" />

<flexi-button btnColor="primary" btnText="Print" btnSize="x-small" btnIcon="print" />
<flexi-button btnColor="primary" btnText="Print" btnSize="small" btnIcon="print" />
<flexi-button btnColor="primary" btnText="Print" btnSize="medium" btnIcon="print" />
<flexi-button btnColor="primary" btnText="Print" btnSize="large" btnIcon="print" />

<flexi-button btnColor="primary" loadingText="loading..." [loading]="true" btnSize="x-small" btnIcon="print" />
<flexi-button btnColor="primary" loadingText="loading..." [loading]="true" btnSize="small" btnIcon="print" />
<flexi-button btnColor="primary" loadingText="loading..." [loading]="true" btnSize="medium" btnIcon="print" />
<flexi-button btnColor="primary" loadingText="loading..." [loading]="true" btnSize="large" btnIcon="print" />

2. Button with Icon

You can use any icon from Google Material Symbols.

<flexi-button btnIcon="print" btnColor="primary" title="Print" flexiToolTip btnSize="medium">

3. Button with Icon and Text

Combine text and an icon in the same button

<flexi-button btnIcon="print" btnColor="primary" btnText="Print" btnSize="medium">

4. Rounded Button

Make the button corners rounded

<flexi-button btnIcon="print" btnColor="primary" btnText="Print" btnSize="medium" [btnRounded]="true">

4. Button with Loading State

Display a loading spinner instead of the button's content

<flexi-button btnColor="primary" btnSize="medium" [loading]="true">

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. |