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