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