@acodez/button

@acodez/button

React button component with plenty of customization.

---

• Installation
• PropsAPI
• Usage

---

Installation

npm install @acodez/button

Props API

Property	Type	Required	Default value	Description
btnSize	string	no	md	size of the button, choose from xs, sm,md, lg
btnColor	string	no	primary	color scheme of the button, choose from primary, secondary, danger, warning, success, info, dark, light
btnType	string	no	textWithIcon	textWithIcon, icon, spinner, or text
btnStyle	string	no	solid	button style, solid, outline, or transparent
btnBorder	string	no	round	border radius, round or square
btnWidth	string	no	auto	button width, auto or full
btnIconPos	string	no	left	button icon position, left or right

---

Usage

import Button from "@acodez/button";

<Button 
    btnColor="primary" // 'info', 'success', 'danger', 'warning', 'light', 'dark'
    btnSize="sm" // 'xs', 'md', 'lg'
    btnBorder="round" // 'square'
    btnStyle="solid" // 'outline', 'transparent'
    btnWidth="auto" // 'full'
    btnIconPos="left" // 'right'
    btnType="textWithIcon" // 'text', 'icon', 'spinner'
    >
    Button
</Button>

btnSize
Use btnSize property to adjust size/width of the button.
Options- 'xs', 'sm', 'md', 'lg'.
Default value - 'md'
Example:

<Button btnSize="md">Button</Button>

btnColor
Use btnColor property to adjust color scheme of the button.
Options- 'primary', 'secondary', 'warning', 'danger', 'info', 'light', 'dark'.
Default value - 'primary'
Example:

<Button btnColor="primary">Button</Button>

btnType
Use btnType property when you want to use button as icon only or for a spinner.
Options- 'textWithIcon', 'text', 'icon', 'spinner'.
Default value - 'textWithIcon'
Example:

<Button btnType="spinner">
    <i className="ion-load-a"></i> // your spinner icon or image.
</Button>

btnStyle
Use btnStyle to change the overall style/appearance of the button.
Options- 'solid', 'outline', 'transparent'.
Default value - 'solid'
Example:

<Button btnStyle="outline">Button</Button>

btnBorder
Use btnBorder to change the border radius of the button.
Options- 'square', 'round'.
Default value - 'round'
Example:

<Button btnBorder="square">Button</Button>

btnWidth
Use btnWidth to change the button to auto width or full width.
Options- 'auto', 'full'.
Default value - 'auto'
Example:

<Button btnWidth="full">Button</Button>

btnIconPos
Use btnIconPos to change the icon position to left or right side of of the text.
Options- 'left', 'right'.
Default value - 'left'
Example:

<Button btnIconPos="right">
    <i className="ion-ios-arrow-thin-right"></i>
    Login Now
</Button>

link
Change button to a link (href).
Example:

<Button link="/innerPage">
    Click to view!
</Button>