Documentation
Feedback
Guides
Storefront Development

Storefront Development
Buy Button

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

Buy Button intends to send the user to the checkout/cart step directly.

Overview


_10
<BuyButton>Buy Now</BuyButton>


Import

Import the component from @faststore/ui

_10
import { BuyButton } from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/atoms/BuyButton/styles.scss'


Usage


_10
<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
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page