@acodez/button
React button component with plenty of customization.
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>
</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>