Buy Button
Getting Started
- Install package
yarn add @acctglobal/buy-button # or npm install
- Import component
import BuyButton from '@acctglobal/buy-button';
Use case example
- Just call the component and pass with a children to customize label.
const buttonStyles;
<BuyButton handleBuy={handleBuyFunction} styles={buttonStyles}>Add to cart</BuyButton>
Props
Parameter | Type | Description |
---|---|---|
handleBuy |
function |
Mandatory. onClick function to the button |
styles |
CSS object |
Optional. Object containing styles for the button |
Styling
There are two ways to customize the component
styles
By prop const buttonStyles = {
backgroundColor: 'blue',
color: 'white',
border: 0,
padding: '0.5rem',
borderRadius: '4px',
},
<BuyButton handleBuy={handleBuyFunction} styles={buttonStyles}>Add to cart</BuyButton>
By attribute
data-sf-buy-button
On your style file (style.css
):
[data-sf-buy-button] {
background-color: #fff;
}