react button component with custom styles
npm install @acodez/buttonReact button component with plenty of customization.
-----
- Installation
- PropsAPI
- Usage
-----
``bash`
npm install @acodez/button
| Property | Type | Required | Default value | Description |
|-----|-----|-----|-----|:-----|
|btnSize|string|no|md|size of the button, choose from xs, sm,md, lg|string
|btnColor||no|primary|color scheme of the button, choose from primary, secondary, danger, warning, success, info, dark, light |string
|btnType||no|textWithIcon| textWithIcon, icon, spinner, or text|string
|btnStyle||no|solid|button style, solid, outline, or transparent|string
|btnBorder||no|round|border radius, round or square|string
|btnWidth||no|auto|button width, auto or full|string
|btnIconPos||no|left|button icon position, left or right|
-----
`jsx
import Button from "@acodez/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
`
btnSize
Use btnSize property to adjust size/width of the button.
Options- 'xs', 'sm', 'md', 'lg'.
Default value - 'md'
Example:
`jsx`
btnColor
Use btnColor property to adjust color scheme of the button.
Options- 'primary', 'secondary', 'warning', 'danger', 'info', 'light', 'dark'.
Default value - 'primary'
Example:
`jsx`
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:
`jsx`
btnStyle
Use btnStyle to change the overall style/appearance of the button.
Options- 'solid', 'outline', 'transparent'.
Default value - 'solid'
Example:
`jsx`
btnBorder
Use btnBorder to change the border radius of the button.
Options- 'square', 'round'.
Default value - 'round'
Example:
`jsx`
btnWidth
Use btnWidth to change the button to auto width or full width.
Options- 'auto', 'full'.
Default value - 'auto'
Example:
`jsx`
btnIconPos
Use btnIconPos to change the icon position to left or right side of of the text.
Options- 'left', 'right'.
Default value - 'left'
Example:
`jsx`
link
Change button to a link (href).
Example:
`jsx``