1.0.3 • Published 2 years ago
@acctglobal/buy-button v1.0.3
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
By prop styles
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;
}