@acctglobal/buy-button

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;
}