BuyButton
BuyButton intends to send the user to the checkout/cart step directly.
Overview​
Loading...
Import​
Import the component from @faststore/ui
import { BuyButton } from '@faststore/ui'
Import Styles
import '@faststore/ui/src/components/atoms/BuyButton/styles.scss'
Usage​
Loading...
Props​
Design Tokens​
| Local token | Default 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-hover | var(--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.