BuyButton

Sends the user to the checkout/cart step directly.

The BuyButton component intends to send the user to the checkout/cart step directly.

Overview

<BuyButton>Buy Now</BuyButton>

Import

Import the component from @faststore/ui
import { BuyButton } from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:
@import '@faststore/ui/src/components/atoms/BuyButton/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

<BuyButton>Buy Now</BuyButton>

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-buy-button
variant"primary" | "secondary" | "tertiary"Specifies the component color variant.
size"small" | "regular"Specifies the size variant.
inversefalse | trueDefines the use of inverted colors.
disabledfalse | trueSpecifies that this button should be disabled.
iconstring | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA React component that will be rendered as an icon.
loadingfalse | trueBoolean that represents a loading state.
loadingLabelstringSpecifies a label for loading state.
iconPosition"left" | "right"Specifies where the icon should be positioned

Design Tokens

Local tokenDefault value/Global token linked
--fs-buy-button-text-color
var(--fs-color-action-text)
--fs-buy-button-text-color-hover
var(--fs-color-action-text)
--fs-buy-button-text-color-active
var(--fs-color-action-text)
--fs-buy-button-bkg-color
var(--fs-color-action-bkg)
--fs-buy-button-bkg-color-hover
var(--fs-color-action-bkg-hover)
--fs-buy-button-bkg-color-active
var(--fs-color-action-bkg-active)
--fs-buy-button-border-color
var(--fs-color-action-bkg)
--fs-buy-button-border-color-hover
var(--fs-color-action-bkg-hover)
--fs-buy-button-border-color-active
var(--fs-color-action-bkg-active)
--fs-buy-button-shadow-hovervar(--fs-button-shadow-hover)

Customization

For further customization, you can use the following data attributes:
data-fs-buy-button
This component inherits Button CSS selectors and styles.

Best Practices

✅ Do's

  • Use this special Button only to send the user to the checkout/cart step directly. For general purposes, use the standard Button.
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)